Events doesn't work after updating them with AJAX

Question

So let's assume that I have this simple code:

HTML:

<div id="test">Hello!</div>
<input type="submit" id="update_map" value="Update!" />

JQUERY:

$("#id").mouseover(function ()
{
    alert("TRUE");
});

So far everything works perfect, but when I'm updating the test div with that code:

$("#update_map").click(function ()
{
    $.post( "update_ajax.php", function( data ) {
        $( "#test" ).html( data );
        alert("Done!");
    });
});

But now, when I clicked on "Update!", and I'll move my mouse over the "test" div, it won't work.

How can I solve that problem?

where is #id ? looks like you are looking for dynamic event binding which can be done using .on click bindng... — Ashish Kasma, Aug 02 '14 at 09:32
With this immediate event model, $(..).click applies to *that, and only that* set of elements. This element is overwritten in the HTML clobber - use one of the delegated event handlers. — user2864740, Aug 02 '14 at 09:34

score 1 · Accepted Answer · answered Aug 02 '14 at 09:32

1

try $().on, it is the new version of $().live which does exactly what you want:

$('body').on('mouseover','#id', function(){
    alert('true');
});

answered Aug 02 '14 at 09:32

Ties

5,726
3
28
37

Events doesn't work after updating them with AJAX

1 Answers1