jQuery attach a click handler after div is created

Question

I'm pretty sure that the answer isn't that difficult, but I'm not sure where to look for it.

I would like to attach a jQuery event handler when a div gets created. For example:

$('#somediv').click(function(){
    //do something
});

But... #somediv doesn't exist. Because of some AJAX loads it will. So what I need is something like.

$('#somediv').whenImcreated(function(){
    $(this).click(function(){
        //do something
    });
});

score 3 · Answer 1 · answered Nov 01 '13 at 15:37

3

You need a delegated event:

$(document).on('click', '#somediv', function(){
    //do something
});

Note that while document as the primary selector will work, for best performance you should make it the closest parent element of #somediv which is present in the DOM on document.ready.

answered Nov 01 '13 at 15:37

Rory McCrossan

306,214
37
269
303

A good start, but OP asked when it was *created*, not when it was clicked. Do you have an event for when the div 'comes to life'?? – Berto Oct 13 '17 at 19:04
I suggest you read and understand the question. While the OP says they want to know when the element is created it's obvious they are trying to attach an event handler after it has been added to the DOM. If you really want to have an event fired when an element is created, use a MutationObserver, something like this: https://stackoverflow.com/a/19401707/519413 – Rory McCrossan Oct 14 '17 at 16:14

score 2 · Answer 2 · answered Nov 01 '13 at 15:38

2

Use .on()

As elements are added dynamically you can not bind events directly to them .So you have to use Event Delegation.

$(document).on('click', '#somediv', function(){ ... });

Syntax

$( elements ).on( events, selector, data, handler );

answered Nov 01 '13 at 15:38

Tushar Gupta - curioustushar

54,013
22
95
103

jQuery attach a click handler after div is created

2 Answers2