jQuery工作不正常

jQuery working awry

本文关键字:不正常 工作 jQuery      更新时间:2023-09-26

我一直在使用ajax来保存一行。为此,我在鼠标悬停在行上显示编辑图标,然后使用ajax保存,然后用新形成的行替换行。问题是,它不会在刚刚保存的行上再次显示编辑图标。

我不知道发生了什么

Url为http://203.100.79.84:9733/user/loginU:test@test.comP: 测试123然后转到http://172.24.0.9:9733/application/events/13

将鼠标悬停在网格行上,尝试编辑记录两次,您就会看到问题。这是代码

jQuery('[rel="datepicker"]').datepicker();
          jQuery('[rel="innerRows"]').mouseover(function (){
          //alert('hererere');
            var spanId = jQuery(this).attr('spanid');
            jQuery('[rel="innerSpans"]').hide();
            jQuery('#edit_'+spanId).show();
          });
          jQuery('[rel="editButton"]').click(function (){
            var recordId = jQuery(this).attr('id');
            jQuery('#show_'+recordId).hide();
            jQuery('#hid_'+recordId).show();
          });
          jQuery('[rel="saveRecord"]').click(function (){
            var recordId = jQuery(this).attr('recId');
            var event    = jQuery.trim(jQuery('#event_'+recordId).val());
            var date     = jQuery.trim(jQuery('#date_'+recordId).val());
            var location = jQuery.trim(jQuery('#location_'+recordId).val());
            var notes    = jQuery.trim(jQuery('#notes_'+recordId).val());
            if(event !='' && date !='' && location !='' && notes !=''){
              jQuery.ajax({
                  url:'/application/saveevent/',
                  dataType: 'html',
                  data: '&recId='+recordId+'&event='+event+'&date='+date+'&location='+location+'&notes='+notes,
                  success : function (text){
                    jQuery('#hid_'+recordId).replaceWith(text);
                    bind();
                  } 
              });
            }

function bind(){    
          jQuery('[rel="datepicker"]').datepicker();
          jQuery('[rel="innerRows"]').mouseover(function (){
            var spanId = jQuery(this).attr('spanid');
            jQuery('[rel="innerSpans"]').hide();            
            jQuery('#edit_'+spanId).show(); 
          });
          jQuery('[rel="editButton"]').click(function (){
            var recordId = jQuery(this).attr('id');
            jQuery('#show_'+recordId).hide();
            jQuery('#hid_'+recordId).show();
          });
          jQuery('[rel="saveRecord"]').click(function (){
            var recordId = jQuery(this).attr('recId');
            var event    = jQuery.trim(jQuery('#event_'+recordId).val());
            var date     = jQuery.trim(jQuery('#date_'+recordId).val());
            var location = jQuery.trim(jQuery('#location_'+recordId).val());
            var notes    = jQuery.trim(jQuery('#notes_'+recordId).val());
            if(event !='' && date !='' && location !='' && notes !=''){
              jQuery.ajax({
                  url:'/application/saveevent/',
                  data: '&recId='+recordId+'&event='+event+'&date='+date+'&location='+location+'&notes='+notes,
                  success : function (text){
                    jQuery('#hid_'+recordId).replaceWith(text);
                    bind();
                  } 
              });
            }
          });          
        }

问候希曼舒·夏尔马。

您需要使用一个经得起未来考验的事件观察器。ondelegate。您正在将悬停事件绑定到DOM中的所有行,但添加新行时,它尚未绑定到该事件。

您需要将事件绑定到父容器,如下所示:

$('#myTable').on('hover','tr',function(){
    // show icon
});