How to correctly add a <select> to a page with jquery and let the change event work?

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

$('select').change(onChange($(this));

You need to understand the difference between calling a function and passing it around as an object. Functions are first-class objects in JavaScript, they are an object just like anything else, so they can be stored in variables, passed as arguments to other functions, and so on.

The code as you have it calls the onChange function, and gives the result to jQuery's change function. You don't want that. The idea is to pass the function itself to jQuery's change function, and jQuery calls it when it is appropriate to do so.

When you have parentheses - () - after a function's name, then you are calling it. Otherwise, you are treating it as an object. So what you intend to do can be accomplished like this:

$('select').change(onChange);

Answer 2

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.

Answer 3

After adding the select to your page you need to add the change event to it:

$('#newSelect').change(
    function() 
    { 
        onChange(this)
    }
);

If your selects all have the same class, it's best to unbind first, and then rebind:

$('.classname').unbind("change");
$('.classname').change(
    function() 
    { 
        onChange(this)
    }
);

Answer 4

Thanks guys for the help, the answers worked but not for what I was doing. I finally figured it out using firebug. I was trying to assign the change event before the ajax had finished doing it's stuff (I'm new to this ajax stuff as you may have noticed).

I added the event assigning to a callback on the load() and now it all works great.

        $(this).load('ploc002.php', {JobNumber: JobNumber, Edit: this.id}, function()
        {
            // The DOM has been changed by the AJAX call
            // Now we need to reassign the onchange events
            $('select,input').change( function()
            {
                onChange(this)
            });
        });