IE fires the change event for a checkbox when the user clicks anywhere on the screen_问答_开发者

IE fires the change event for a checkbox when the user clicks anywhere on the screen

开发者 https://www.devze.com 2023-03-19 23:46 出处：网络

Here is the simplest code that recreates the problem.(In my real world example, I\'m resetting the checkbox if there is an error with an ajax call.)

Here is the simplest code that recreates the problem. (In my real world example, I'm resetting the checkbox if there is an error with an ajax call.)

<html>
    <scrip开发者_Go百科t src="http://code.jquery.com/jquery-1.4.2.js"></script>
<script>
    $(document).ready( function(){
        $('#ckbx').change( function( e ){
            alert('fired.');
            this.checked = !this.checked;
        })
    });
</script>

<form>
    <input id="ckbx" type="checkbox"></input>
</form>

</html>

In IE9, when I click the checkbox, it displays the alert. Then if I wait any amount of time, then click anywhere else on the page, it fires the event again.

If I remove this.checked = !this.checked the problem goes away.

Can anyone explain this to me? Or provide a way to get around this problem?

UPDATE: I'm using jquery 1.4.2; in jquery 1.6 this is not a problem. However, we are close to releasing, and we are reluctant to change versions of jquery.

This is because the .change() event is firing again when you reset the checkbox and click elsewhere on the page. You should use the .click() event instead.

<html>
    <script src="http://code.jquery.com/jquery-1.4.2.js"></script>
<script>
    $(document).ready( function(){
        $('#ckbx').click( function( e ){
            alert('fired.');
            this.checked = !this.checked;
        })
    });
</script>

<form>
    <input id="ckbx" type="checkbox"></input>
</form>

</html>

So the problem is that you are effectively firing the change event from within the change event. One option could be to use a different event so you can the change the value via code.

Alternatively, you could consider a activeFlag similar to this...

var activeFlag;
$(document).ready( function(){
    activeFlag = true;
    $('#ckbx').change( function( e ){
        if(activeFlag)
        {
            alert('fired.');
            activeFlag = false;//temp disable event to process value reset
            this.checked = !this.checked;
            activeFlag = true;
        }
    })
});

hope that helps

RE: THE OTHER SUGGESTION

This would be the same as my suggestion to use another event. However, with the click you lose you event handler if the user tabs to and uses the space bar to make the change. Of course, you can decide if this is acceptable or not.

Sorry to the other poster, I would have commented on yours but I don't have the reputation yet. Which is actually why I am here, I want to build it up purely so I can hit 15 and mark up an answer that helped me out the other day. Silly really

The active flag idea seems to have the same problem, though it works if implemented like this:

var activeFlag = true;
$('#ckbx').change( function( e ){
    if(activeFlag)
    {
        activeFlag = false;
        alert('fired.');            
        this.checked = !this.checked;           
    }
    else
    {
        activeFlag = true;
    }
})