jQuery select "change" event not fired

Question

I have three depending selects. First one, have some values.

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

Second and third are blank:

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

I want to populate blank selects via ajax requests. So I do:

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 it works fine. The second select is populated, but... no 'change' event is fired for select 'second'. To get this event, I have wrote:

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

But no alert 'test' is visible. How to catch this 'change' event for dynamically loaded content for second select?

Have you tried adding the assignment of the change event inside of the success callback of the AJAX? — Aaron Hathaway
– Aaron Hathaway, Commented Aug 19, 2010 at 14:37
Do you want to rise the change event of #second right after loading the data? If you manually change the second select, then the alert box should be shown with your actual code. — davehauser
– davehauser, Commented Aug 19, 2010 at 14:51

Gadonski · Accepted Answer · 2010-08-19 14:36:52Z

3

try this:

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

answered Aug 19, 2010 at 14:36

Gadonski

3,3502 gold badges27 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

davehauser · Accepted Answer · 2010-08-19 15:06:24Z

Because the #second element just exists don't have to use the delegate and live functions

$('#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 do the alert right after populating the second select, then include it in your callback function of the $.ajax()

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

Community · Accepted Answer · 2017-05-23 10:27:53Z

What version of jQuery are you using? Anything prior to 1.4.x didn't support live events for change.

(see Why doesn't jQuery 1.3.3. live() support all events?)

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

You can see in the caveats:

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

Dilip Langhanoja · Accepted Answer · 2013-10-23 11:22:23Z

as far jquery update its version from jQuery 1.7 its introduce "on" see here http://api.jquery.com/on/ . So if you use following way definately it will call "Change" event.

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

Collectives™ on Stack Overflow

jQuery select "change" event not fired

4 Answers 4

Comments

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Related