Question

The underlying HTML for my drop down has a chance of changing and I was trying to set it up using the .live option rather than the .change option. it does not work for me.

What I currently have is:

$("#ItemsPerPage").change(function(e) { return updatePaging(); });

Unfortuantely, if I update this control via $.ajax it loses the event definition. What I tried, and is not working, is:

$("#ItemsPerPage").live("change", function(e) { return updatePaging(); });

Any thoughts?

Answer 1

Instead of rebinding the <select> every time, you’re better off just swapping its contents (the list of <option> elements) instead.

So use this as you already are:

$("#ItemsPerPage").change(function(e) { return updatePaging(); });

but when you update it, just swap out its contents ( where newSelectElement is the new <select> element):

function updateItemsPerPage( newSelectElement ) {
    $("#ItemsPerPage").empty().append( newSelectElement.childNodes );
}

This way, the binding won’t need to be refreshed because the node itself isn’t swapped.