Question

I have a form with an id of "wizard" – I only have select elements in this form. This form is in a lightbox using the JQuery plugin fancybox:

I want to know when any of these have been changed using JQuery. How can I do this? I currently have:

$('form#wizard select[name=servers], form#wizard select[name=cores]').change(function() {
var channels = parseInt($('form#wizard select[name=servers]').val(), 10) * parseInt($('form#wizard select[name=cores]').val(), 10);
$('#yellow').val(channels);
});

EDIT – I have the above wrapped in $(document).ready(function() {...}

However, it does not work, it does not even get run. I have put alerts in there and they never show up. The above only works when the above is a div that I have removed the display:none from, strange! So I am looking for a different implementation to get around this as I need that lightbox as it is.

I really need help on this.

Thanks all

Answer 1

The jQuery change function only binds those elements that are present when the domready event fires. If the lightbox plugin you are using is dynamically creating elements, you should be using jQuery’s live function to “bind your handler to all current – and future matched elements”.

Change this:

$('your selector').change(function() { /* code ... */ });

with this:

$('your selector').live('change', function() { /* code ... */ });