Javascript Jquery-After.append.将鼠标悬停在其他元素上不工作

我编写了一些代码来处理通过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();
    });
});

---

为什么？

您可以使用上的

功能绑定到动态添加的元素，而不是：

$('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
});

.hover（）在追加之前已绑定，因此事件不在该项上。
您需要对mouseenter和mouseleave都使用.on（），才能使其工作。
请参阅此处的“附加说明”部分：
为什么？因为
$（'div.comment[id^=comment\uquo'）.hover（…
只将悬停处理程序绑定到此时与该选择器匹配的元素，而不绑定到将来可能与之匹配的元素。@nnnnnn我如何匹配
$（'div.comment[id^=comment\uquo'）。悬停（…
在
.append（）
之后？但OP的代码调用
.hover（）
有两个回调（一个用于mouseenter，一个用于mouseleave）。和（）

对字符串

'hover'

的支持在v1.9中被删除。@nnnnnn我的错误，这里有一个更新应该会更好一些。是的，这更像是clav.+1，不过我建议尝试

mouseenter

和

mouseleave

而不是

mouseover

和

mouseout

，以便与

 .hover（）

执行此操作。