JQuery работает не так, как надо

Question

Я использую ajax для сохранения строки. Для этого я показываю значок редактирования при наведении курсора на строку, а затем сохраняю его с помощью ajax, а затем заменяю строки на вновь сформированную строку. Проблема в том, что он не показывает значок редактирования в строке, которая была только что сохранена.

Я не знаю, что происходит

URL-адрес http://203.100.79.84:9733/user/login U: test@test.com P: test123 затем перейдите к 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();
                  } 
              });
            }

          });          
        }

С уважением Химаншу Шарма.

Answer 1

Вам необходимо воспользоваться наблюдателем событий на будущее.Либо on, либо delegate.Вы связываете событие hover со всеми строками в DOM, но при добавлении новой строки оно не привязывается к этому событию.

Вам необходимо привязать событие к родительскому контейнеру, например:

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