jQuery-.append之后，.hover在其他元素上不起作用

Question

I wrote a bit of code to handle the insertion of a comment via AJAX. Once you have entered the comment, having received the HTML from the server and use .append() to insert it into the DOM, does not seem to be handled the event .hover() for the new item.

There is the code:

/**
 * 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();
    });
});

WHY?

Answer 1

You can use the on function to bind to elements that are dynamically added so instead of this:

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

do this:

$(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() is bound before your append happens, so the event isn't on the item. You need to use .on() for both mouseenter and mouseleave in order for it to work. See the 'Additional Notes' section on here: http://api.jquery.com/on/