i'm trying to catch a change() on a select which is added after the dom generation but i can't success. Here is a sample code:

HTML:

<div class="test" id="divTest"></div>

jQuery:

$('#divTest').click(function(){ $(this).parent().append("<select id='testSel'><option value='f'>F</option><option value='F'>D</option></select>");});

$('#testSel').change(function(){
    alert('change');
});

I want to see the alert when i change the value in the select..

And here is a fiddle. /

i'm trying to catch a change() on a select which is added after the dom generation but i can't success. Here is a sample code:

HTML:

<div class="test" id="divTest"></div>

jQuery:

$('#divTest').click(function(){ $(this).parent().append("<select id='testSel'><option value='f'>F</option><option value='F'>D</option></select>");});

$('#testSel').change(function(){
    alert('change');
});

I want to see the alert when i change the value in the select..

And here is a fiddle. http://jsfiddle/T8J8p/3/

• javascript
• jquery
• html
• dom

• Use delegation instead. – emerson.marini Commented May 30, 2014 at 11:27
• 1. Since you're manipulating the DOM, you should use on. 2. It's a bad thing to have more than one element with the same ID. (If the user would click the button more than once...) 3. Your current select element has id='testS' while in your bind event you're writing #testSel. – Ofir Baruch Commented May 30, 2014 at 11:29
• Every one heard about Jquery live event. – Jitendra Yadav Commented May 30, 2014 at 11:44
• 2 @JitendraYadav jQuery's live event was deprecated in jQuery 1.7. on should be used instead. – James Donnelly Commented May 30, 2014 at 11:51

5 Answers 5

Two problems:

1. Your select element's ID is #testS not #testSel.¹
2. You need to use event delegation for this, through jQuery's on() method:

$('body').on('change', '#testS', function(){
    alert('change');
});

JSFiddle demo.

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

^{1. This related to original JSFiddle featured in the question (available here). The question has since been edited.}

You need event delegation dynamically added DOM::

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

$(document).on('change','#testS',function(){
 alert('change');
});

Demo

Try this,

$('body').on("change", "#testSel", function(){
    alert('change');
})

You have to bind event using event delegation as the element is added to the DOM after the DOM loaded:

$(document).on('change','#testSel',function(){
    alert('change');
});

See Details HERE

$('#divTest').click(function(){
  $(this).parent().append("<select id='testS'><option value='f'>F</option><option value='F'>D</option></select>");
  $('#testS').change(function(){alert('change');});
});

You can't bid to something that does not exist yet, so bind it after the click, inside the function. And there was a typo in the selector #testS vs #testSel