jquerybindinginternet-explorer-8internet-explorer-7xajax

jQuery Dynamic Binding not working IE 7 or 8


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


Solution

  • 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.