Question

I have this typical problem with select. First let me make it clear that I am running jQuery 1.3.2 which I know is pretty old but due to some reasons I cannot update it. My problem is with jQuery 1.3.2 and IE7. Now the problem is I have the below select box…

<select class="myclass">
    <option value="select">Select</option>
    <option value="sunday">Sunday</option>
    <option value="monday">Monday</option>
    <option value="tuesday">Tuesday</option>
    <option value="wednesday">Wednesday</option>
</select>

and the problem is that with my script this select is replaced with same select which is retrieved from an ajax call. But since its replaced the change event does not work on it anymore. I can use live() but that does not work in IE7 as of jQuery 1.3.2. I also cannot use deligate(), so is there any method by which i can achieve successive change events after the select has been replaced?

If not is there any way i can bind the .change() function to the same element after the ajax call?

Here’s my script…

$('.myclass').change(function(){
    //other code
    $.post(document.URL,data,function(){
        //other code
        //[[here on success I want to bind the same code again on my class so it will be called the next time]]
    });
});

Is rebinding the function an option here? I am looking for a solution besides adding livequery.

Link to Fiddle If you run this in IE9 it will work but not in IE7 and IE8

Answer 1

You can replace the option‘s of select box instead of replacing itself.

change event not supported by $.live():

In jQuery 1.3.x only the following JavaScript events could be bound:

click, dblclick, keydown, keypress, keyup, mousedown, mousemove,
mouseout, mouseover, and mouseup.

See http://docs.jquery.com/Events/live.

You can use livequery.

One thing you can do is, after replacing the select, you can rebind the change event to that select.

For example:

function replaceSelect() {
    var select = this;
    //other code
    $.post(document.URL,data,function(data){
        $(select).replaceWith(data.html);
        $('.myclass').change(replaceSelect);
    });

}
$('.myclass').change(replaceSelect);