JQuery select 'change' event not fired

Question

I have three dependent choices. The first one has some meanings.

<select id="first"> <option value="1">v1</option> <option value="2">v2</option> </select> 

The second and third are empty:

 <select id="second"></select> <select id="third"></select> 

I want to fill in empty selections with ajax requests. That's why I am:

 jQuery('body').delegate('#first','change',function(){ jQuery.ajax( { 'type':'GET', 'data':{'changed':$('#first').val()}, 'url':'myURL1', 'cache':false, 'success':function(html){jQuery("#second").html(html)}}); return false; }); 

So everything is fine. The second selection is populated, but ... there is no "change" event to select "second". To get this event, I wrote:

  $(document).ready(function() { $('#second').live("change", function() { alert('test'); }); }); 

But no warning "test" is not visible. How to catch this “change” event for dynamically loaded content for second choice?

Answer 1

Since the #second element just exists, you don’t need to use delegate functions and live

 $('#first').change(function(){ $.ajax( { 'type':'GET', 'data':{'changed':$('#first').val()}, 'url':'myURL1', 'cache':false, 'success':function(html){ $("#second").html(html); } }); return false; }); $('#second').live("change", function() { alert('test'); }); 

if you want to make a warning immediately after filling in the second selection, then include it in your $ .ajax () callback function

 $('#first').change(function(){ $.ajax( { 'type':'GET', 'data':{'changed':$('#first').val()}, 'url':'myURL1', 'cache':false, 'success':function(html){ $("#second").html(html); $("#second").change(); } }); return false; }); 

Answer 2

try the following:

 $('#second').change(function(){ alert('Test') }) 

Answer 3

What version of jQuery are you using? Anything prior to 1.4.x did not support live events for change .

(see Why jQuery 1.3.3. live () does not support all events? )

Here is the API for it http://api.jquery.com/live/

You can see in reservations:

In jQuery 1.3.x, only the following JavaScript events are used (in addition to custom events) that can be associated with .live (): click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover and mouseup.

Answer 4

since jQuery is updating its version from jQuery 1.7, it is represented by "on" here http://api.jquery.com/on/ . Therefore, if you use the following path, it will call the "Change" event.

  $(document).ready(function() { $('#second').on("change", function() { alert('test'); }); });