I have some code that creates an accordion with a select2 element which has a class called docType. I also have jquery code to trigger an event on selecting a value of the jquery element. While this works for select2 elements that already exist on the page load, it doesn't trigger for dynamically added elements. Here is my on change code:

$('.docType').on('change', function() {
    // the code inside should be firing for dynamically added elements
}

Does anyone know why this way isn't working?

I have some code that creates an accordion with a select2 element which has a class called docType. I also have jquery code to trigger an event on selecting a value of the jquery element. While this works for select2 elements that already exist on the page load, it doesn't trigger for dynamically added elements. Here is my on change code:

$('.docType').on('change', function() {
    // the code inside should be firing for dynamically added elements
}

Does anyone know why this way isn't working?

• javascript
• jquery
• jquery-select2

• maybe put .docType in quotes – thanksd Commented Dec 23, 2015 at 16:16
• You need to bind that event to the new elements too, as the jquery selector is only queried once on load – Joseph Young Commented Dec 23, 2015 at 16:17
• 1 @thanksd sorry that was a typo. I do have .docType in quotes in the code – NiallMitch14 Commented Dec 23, 2015 at 16:20
• Any reason for downvote? – NiallMitch14 Commented Feb 3, 2016 at 16:00

4 Answers 4

Use event delegation for dynamically added elements.

$(document).on("change",".docType", function() {

Us the 'on' method to delegate events. This will add a handler to dynamically generated elements.

$(document).on("change",".classnameyouarewatching", function() {

 //Your code
}

on method definition

If your elements are being dynamically loaded, you'll need to use something more like what's below. For instance, say you're dynamically generating via AJAX or something similar the following input element:

<input type="text" class="text_element" value="some value">

To add event handlers to that element try using JS like this:

<script type="text/javascript">
$(document).on('change', '.text_element', function() {
    console.log('Element with class "text_element" has changed');
    console.log('New value is: ' + $(this).val());
});
</script>

The answer above is correct, but it is not just the 'on' handler that delegates the handling of dynamically generated DOM elements. The actual trick here is to place the handler on the document as it will always exist rather than the element or element class as you have above. It is the handler on document, looking for elements of a class (2nd param of the on event) that gets the job done you're looking for.

I think u need to call find() method for all the select element before firing on change method like below

$(".docType").find(":select").on( ("change", function() { // the code inside });

If it does not work, try JQuery instead of $.