什么原因导致jQuery点击事件并不总是被触发?

时间:2015-01-13 19:52:34

标签: javascript jquery

我有以下脚本。 HTML不是动态添加的。 99%的时间,确认弹出窗口将打开,如果确认,数据将被发布,但是不时地,复选框在视觉上改变状态,但确认弹出窗口不会打开。我在Windows 7上运行的Firefox 34.0.5上见过这个,并且还没有在其他浏览器上测试过。

可能导致这种情况发生的原因,以及如何防止这种情况发生?

EDIT。当我进入页面并快速单击复选框时,它会一直发生。

<input type="checkbox" checked="" id="makePublic">

$(function() {
    $("#makePublic").click(function(e){
        if($(this).is(":checked")){
            var status=1;
            var message='Are you sure you wish to make this project public?';
        }
        else {
            var status=0;
            var message='Are you sure you wish to make this project private?';            
        }
        if(window.confirm(message)) {
            $.post('update.php',{id:$('#id').val(),status:status});
        }
        else {e.preventDefault();
            return;
        }
    });
});

1 个答案:

答案 0 :(得分:5)

  

EDIT。当我进入页面并快速单击复选框时,它会一直发生。

然后你应该禁用该元素,直到你的javascript完成。问题是该复选框在没有附加事件的情况下可见。在我看来,最好的选择是禁止点击(通过将其设置为禁用或隐藏等),直到事件被附加为止。

<input type="checkbox" checked="" id="makePublic" disabled="disabled">

$(function() {
    $("#makePublic").click(function(e){
        if($(this).is(":checked")){
            var status=1;
            var message='Are you sure you wish to make this project public?';
        }
        else {
            var status=0;
            var message='Are you sure you wish to make this project private?';            
        }
        if(window.confirm(message)) {
            $.post('update.php',{id:$('#id').val(),status:status});
        }
        else {e.preventDefault();
            return;
        }
    });

    $("#makePublic").prop('disabled','');

});