JQuery - После .append, .hover на другом элементе не работает

Question

Я написал немного кода для обработки вставки комментария через AJAX. Как только вы ввели комментарий, получив HTML-код с сервера и используя .append(), чтобы вставить его в DOM, похоже, что для нового элемента не было обработано событие .hover().

Существует код:

/** 
* This code manage insert comment with ajax 
**/ 

$(document).ready(function() 
{ 
    $('form[id^=insert_comment_for_product_]').submit(function (event) 
    { 
     event.preventDefault(); 

     var productId = $(this).attr('id'); 
     var productIdClear = productId.substr(productId.lastIndexOf('_', 0) - 1, productId.length); 

     var textarea = $('#' + $(this).attr('id') + ' textarea').val(); 
     var textareaId = $('#' + $(this).attr('id') + ' textarea').attr('id'); 
     var token = $('#' + $(this).attr('id') + ' input#user_comment_product__token').val(); 

     var gif = $(this).parent('div').children('img.insert_comment_img'); 
     $(gif).show(); 

     $.post($(this).attr('action'), 
     { 
      'id': productIdClear.toString(), 
      'user_comment_product[comment]': textarea, 
      'user_comment_product[_token]' : token 
     }, 
     function(data) 
     { 
      $('div.product_comment>div').append(data); 
      $('#' + textareaId).val(' '); 
      $(gif).hide(); 
     }); 

    }); 
    /** 
    * This is the function that no work afert .append() 
    **/ 


    $('div.comment[id^=comment_]').hover(function() 
    { 
     var commentId = $(this).attr('id'); 

     $('#' + commentId + ' img.comment_delete').show(); 

     $('#' + commentId + ' img.comment_delete').click(function(event) 
     { 
      event.stopImmediatePropagation(); 
      commentId = commentId.substr(commentId.lastIndexOf('_') + 1, commentId.length); 

      $.post("../../../user/comment/delete", 
      { 
       'id': commentId.toString() 
      }, 
      function(data) 
      { 
       if(data.responseCode == 200) 
       { 
        $('div#comment_' + commentId).hide(); 
       } 
      }); 
     }) 

    }, 
    function() 
    { 
     var commentId = $(this).attr('id'); 

     $('#' + commentId + ' img.comment_delete').hide(); 
    }); 
}); 

ПОЧЕМУ?

Answer 1

Вы можете использовать функцию on для привязки к элементам, которые динамически добавляются таким образом, вместо этого:

$('div.comment[id^=comment_]').hover(function() 

сделать это:

$(document).on('mouseover', 'div.comment[id^=comment_]', function(e) { 
    // code from mouseover hover function goes here 
}); 

$(document).on('mouseout', 'div.comment[id^=comment_]', function(e) { 
    // code from mouseout hover function goes here 
}); 

Answer 2

.hover() связан перед вашим Append происходит, поэтому событие не находится на элементе. Для того, чтобы он работал, вам необходимо использовать .on() для мыши и мыши. См. Раздел «Дополнительные примечания» здесь: http://api.jquery.com/on/