Click event not working on objects added dynamically in jQuery

Question

I've a HTML page where I'm adding an icon file to DIVs dynamically. This image serves as close icon and has a predefined class, say, 'close'. To this class I've attached the click event like

$('.close').click(function({
     alert('You chose to delete this image');
});

this works fine for the script that is loaded on page load. However, when I attach the same icon to other DIVs, the click event doesn't seem to trigger. There's no error in firebug. I don't know what's wrong!

try : `$('.close').on("click" , function()` – Ivan Chernykh Sep 09 '13 at 11:39 — Ivan Chernykh, Sep 09 '13 at 11:39
the event is working for objects loaded on runtime! – Sayed Sep 09 '13 at 11:40 — Sayed, Sep 09 '13 at 11:40

score 4 · Accepted Answer · answered Sep 09 '13 at 11:40

4

Delegate on document or the closest static element

$(document).on('click', '.close', function () {
    alert("You chose to delete this image");
});

answered Sep 09 '13 at 11:40

Anton

31,487
5
43
54

You were faster :) +1 – Alvaro Sep 09 '13 at 11:41
Thanks Anton. That worked :) – Sayed Sep 09 '13 at 11:45

score 1 · Answer 2 · answered Sep 09 '13 at 11:41

1

You need to do event delegation:

$(document).on('click', '.close', function () {
    //rest of the code

}

answered Sep 09 '13 at 11:41

Harry

83,910
24
185
203

Click event not working on objects added dynamically in jQuery

2 Answers2