How to select elements added via javascript

Question

I have a simple code that check a select change and alert a message. This is working ok but when I insert new .select-payment elements on the page this method is only available to the first one and not the ones created via javascript

$(document).ready(function() {
  return $(".select-payment").on("change", function() {
    return alert("hello");
  });
});

Any idea how to make it work for any element that is added after the page is loaded that has a .select-payment class?

have you checked this before? http://api.jquery.com/on/ - Also, what kind of elements are being added via javascript? that is important to know when using "on" to delegate listeners — phouse512, Aug 23 '13 at 14:15
Kinda disturbing that high-rep users jump to answer one of the most asked question on the site instead of voting to close... — JJJ, Aug 23 '13 at 14:17
I thought the answer to this was $(".select-payment").live("change",function), but all the smart people seem to agree on $(document).on . Whats the diff? — Matt, Aug 23 '13 at 14:18
@Matt `.live()` has been deprecated for a long time and is even removed from the latest versions. — JJJ, Aug 23 '13 at 14:19

score 4 · Accepted Answer · answered Aug 23 '13 at 14:15

4

$(document).on("change", ".select-payment", function() {
    alert("hello");
});

Also returning from within the change handler hardly makes sense, even less, returning the result of an alert.

answered Aug 23 '13 at 14:15

Darin Dimitrov

1,023,142
271
3,287
2,928

score 1 · Answer 2 · answered Aug 23 '13 at 14:16

You could use event delegation like below,

$(document).on('change', '.select-payment', function () {..

Replace the document with any closeby container that exist in DOM when executing the above line
Event delegation binds the event to the parent element and executes the handler when event.target matches the specified selector.

score 1 · Answer 3 · answered Aug 23 '13 at 14:16

When targeting dynamically created elements, you need to use .on()'s delegated syntax:

 $(document).on("change", ".select-payment", function() {

From the docs:

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page.

score 1 · Answer 4 · answered Aug 23 '13 at 14:16

1

why are you putting return statement ? You must attach your event handler to the document and not the existing .select-payment.

Try this : $(document).on("change",".select-payment",function(){...});

answered Aug 23 '13 at 14:16

TCHdvlp

1,334
1
9
15

score 0 · Answer 5 · edited Aug 23 '13 at 14:34

$(document).on("change", ".select-payment", function () {

 alert("hello"); }
);

You can replace document with any closer parent element which will always exist in DOM for better performance. Like

$('#closestId').on("change", ".select-payment", function () { 

     alert("hello"); 
}
);

if you use $("document") jQuery will search for a node/tag named as document like and wont find anything as document is actually an object.

But you could use $("body") as body is a node/element of DOM.

How to select elements added via javascript

5 Answers5