Geek Answers Handbook

JQuery issue with change event and IE8

There is an error in jQuery 1.4.2 that makes the change event when the selection item is fired twice when using both the DOM event and the jQuery event, and this is only in IE7 / 8. Here is the test code:

<html>

<head>
    <script src="http://code.jquery.com/jquery-1.4.2.js" type="text/javascript"></script>

    <script type="text/javascript">

       jQuery(document).ready(function() {

         jQuery(".myDropDown").change(function() {


         });

       });

    </script>

</head>

<body>
    <select class="myDropDown" onchange="alert('hello');">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
        </select>
</body>

</html>

Update : Another look at the problem, in fact, this is a real problem with our application. Associating a live change event on a selector that does not even touch a select item with a DOM event also causes a double trigger.

<html>

<head>
    <script src="http://code.jquery.com/jquery-1.4.2.js" type="text/javascript"></script>

    <script type="text/javascript">

       jQuery(document).ready(function() {

         jQuery(".someSelectThatDoesNotExist").live("change", function() {


         });

       });

    </script>

</head>

<body>
    <select class="myDropDown" onchange="alert('hello');">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
        </select>
</body>

</html>

Ticket to the actual error: http://dev.jquery.com/ticket/6593

, ASP.NET, jQuery, , ( ) .

-, , ?

+5
5

, jquery, , 1.7, .

+2

, , , . , jQuery, , DOM 0 , :

     jQuery(".myDropDown").change(function() {
         if ($.browser.msie) {
             var dd = $(this)[0], 
                 oc = dd.onchange;
             dd.onchange = null;
             window.setTimeout(function () {
               dd.onchange = oc;
             }, 0);
          }
     });

IE8, "", IE. , , , . , . .

- DOM 0 jQuery.

+1

, :

if ($.browser.msie && (parseInt($.browser.version, 10) == 8 || parseInt($.browser.version, 10) == 7)) {
    var btn2 = $(btn).clone();
    $(btn).after(btn2);
    $(btn).remove();
    $(btn2).bind("click", function () {
        //your function here
    });
}
+1

something like that?

jQuery(".myDropDown").removeAttr('onchange').change(function() {

 alert(0);
});
0
source

We will actually solve the problem in another way, since it is specific to IE, ASP.NET and the select element, we use the following code:

$(function () {
if ($.browser.msie) {
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_pageLoaded(function() {
        $('select[onchange]:not(.iefixed)')
            .addClass('iefixed')
            .each(function () {
                var self = $(this), dd = self[0], action = self.attr('onchange');
                self.removeAttr('onchange').change(action);
                dd.onpropertychange = function() { dd.blur(); };
            });
    });
}
});
  • Make sure that the fix applies only to the select element, which has auto repeat set to true (onchange) once.
  • We mainly rely on jQuery to trigger a change event for us, but in order for IE to do this, we need to trigger an element blur event when onpropertychange occurs.
0
source

More articles:


All Articles