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

Question

I have the following script. The HTML is not dynamically added. 99% of the time, the confirm popup will open and the data will be posted if confirmed, but every now and then, the checkbox visually changes state, but the confirm popup does not open. I've witnessed this on Firefox 34.0.5 running on Windows 7, and haven't yet tested enough on other browsers.

What might cause this to happen, and how can it be prevented?

EDIT. It happens all the time when I go to the page and quickly click the checkbox.

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

Answer 1

EDIT. It happens all the time when I go to the page and quickly click the checkbox.

Then you should disable the element until your javascript has finished. The issue is that the checkbox is visible without the event being attached. The best option in my opinion is to disallow the click (by setting it disabled or hiding etc) until after the event has been attached.

<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','');

});