On change not working for dynamically added select2

Question

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?

Jeremiad

maybe put .docType in quotes – Ulises

You need to bind that event to the new elements too, as the jquery selector is only queried once on load – Mistreat

@Ulises sorry that was a typo. I do have .docType in quotes in the code – Jeremiad

Any reason for downvote? – Jeremiad

Answer 1

Use event delegation for dynamically added elements.

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

Ashia

i am writing this way only this delegated working on all elements but not on select2 – Averyaveryl

Answer 2

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

Moreland

Answer 3

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.

Arcanum

Correct. The document is what is being watched for changes and the on method takes 3 parameters, the type of event it is looking for on the document , the element that the scope (document) is looking for a change to, and the handler function itself. Not sure if you were talking to me when you said "the answer above", but I wanted to expand on my response just in case. – Moreland

Yes, I was just expounding on why that works properly so the poster could understand. Using the on handler on a classed select such as $('.my-element').on('change', function() { } ); would not have gotten him where he needed to be. That second param is what makes it all tick properly. – Arcanum

Answer 4

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 $.

Mozellemozes