jQuery Dynamic Binding not working IE 7 or 8

Question

I'm working on a selection drop down list. this list adds all the selected elements (done by a user) into a container < DIV > in the form of hidden fields. This selections have a link that gives the user the option to remove it from the selection container. Every time a new selection is made, the code automatically binds a function that is in change of removing the selection in the case the user clicks on the REOMVE link, something like this:

< DIV id="selectedCategories">
Category #1 REMOVE_LINK
< input type="hidden" value="9524" name="recordIds[]" /> < /DIV>
< select>
< option >Category #2< /option>
< option >Category #3< /option>
< /select >

Every time a new selection is made from the drop down list, all the previously selected elements need to be "re-binded" with the delete function.For some reason it is necessary to do this, because all the elements seem to loose their previous binding when a new one is added.

This works very well in Fire Fox and Safari, but they do not work at all for IE. even though I re-bind every time for every selected element, all the bindings are lost and the only one that works is the very last element I have added and binded with the delete function.

My question is: is there a workarround for this, or how do I address this issue? Unfortunately IE is the most widely used internet browser out there :(

Thank you

Answer 1

I used the Live function with no luck, maybe I'm doing something wrong. what did work for me was unbinding the function before adding or rebinding any other function.
So if I bind a function to the click event like this.

 $('#deleteRecord1').bind('click',function() 
   { 
        // function here ...
   }
 );


$('#deleteRecord2').bind('click',function() 
   { 
        // function here ...
   }
 );

Later when I delete record1 I need to rebind this method to the record2, I will do it this way to make it work in IE 7 and 8

 $('#deleteRecordId').unbind('click');
 $('#deleteRecordId').bind('click',function() 
   { 
        // function here ...
   }
 );

In this case the "Id" refers to a unique id that every that has been selected has, in this example corresponds to the number 2.

Answer 2

Are you sure that you are using the correct version of jQuery to use the live function? It is relatively new, so you need to make sure you are using the newest version.

Answer 3

You can use the live() function to bind to each instance of an element on the page, present and future. This saves you having to rebind.

$("a.removeLink").live("click", function() {
  $(this).next("input").remove();
}