开发者

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

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;
    }
})
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜