I wrote a bit of code to handle the insertion of a ment via AJAX. Once you have entered the ment, 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 ment with ajax
 **/

$(document).ready(function() 
{
    $('form[id^=insert_ment_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_ment_product__token').val();

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

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

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


    $('divment[id^=ment_]').hover(function()
    {
        var mentId = $(this).attr('id');

        $('#' + mentId + ' imgment_delete').show();

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

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

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

        $('#' + mentId + ' imgment_delete').hide();
    });
});

WHY?

I wrote a bit of code to handle the insertion of a ment via AJAX. Once you have entered the ment, 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 ment with ajax
 **/

$(document).ready(function() 
{
    $('form[id^=insert_ment_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_ment_product__token').val();

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

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

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


    $('div.ment[id^=ment_]').hover(function()
    {
        var mentId = $(this).attr('id');

        $('#' + mentId + ' img.ment_delete').show();

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

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

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

        $('#' + mentId + ' img.ment_delete').hide();
    });
});

WHY?

• javascript
• ajax
• jquery
• appendchild

• 1 Why? Because $('div.ment[id^=ment_]').hover(... only binds a hover handler to elements matching that selector at that moment, not for elements that might match it in future. – nnnnnn Commented May 23, 2013 at 20:55
• @nnnnnn How i can match $('div.ment[id^=ment_]').hover(... after .append()? – Angelo Giuffredi Commented May 23, 2013 at 21:10

2 Answers 2

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

$('div.ment[id^=ment_]').hover(function()

do this:

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

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

.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./on/