Question

I’ve currently got multiple select’s on a page that are added dynamically with ajax calls using jquery.

The problem I’ve had is I could not get the change event to work on the added select unless I use the onchange inside the tag e.g.

<select id='Size' size='1' onchange='onChange(this);'> 

This works, but I’m wondering if there’s a way to get it to be assigned by jquery. I’ve tried using $('select').change(onChange($(this)); in the usual place of $(document).ready but that didn’t work.

I’ve tried adding the event with bind after the ajax call but that did not work either.

Any better way to assign the event?

Answer 1

I had a similar problem and found this solution here:

When you do something like this:

$('p').click( function() { alert('blah'); } )  

All the currently existing ‘p’ elements will have a click handler attached. Now if you go on to add other ‘p’ elements to the page they will not have the your click handler attached to them. You would need to ‘rerun’ the

$('p').click( function() { alert('blah'); } ) 

on the new elements to attach the handlers to them.

You might like to look at the ‘LiveQuery’ plugin as is manages all newly added elements so they get the previously attached handlers attached to them when they’re added to a page.

Karl Rudd

So after you add the select’s you’ll have to repeat the change() call.