Ajax事件發生后，Click事件不會觸發

Question

我有一個使用iCheck設置樣式的復選框。 這部分工作正常。 我的問題是我想在每次更改時將復選框狀態保存在數據庫中。 但是我的ajax請求只會在第一次觸發。

我有這樣的設置：

HTML：

<ul class='tasks'>
   <li><input type=checkbox rel='module' data='1' name=done[]  class='taskStatus'>Text</li>
</ul>

jQuery的

$("input[type=checkbox]").on("ifClicked", function(){
    alert("init");

    var stateObj = {
        id: $(this).attr("data"),
        mode: $(this).attr("rel"),
        state: null
    };

    if($(this).prop("checked") === false){
        stateObj.state = 1;
    } else {
        stateObj.state = 0;
    }

    updateState(stateObj);
});


function updateState(stateObj){
    alert("updating");

    $.ajax({
        url: "moduleAjax.php?module=" + stateObj.mode + "&page=eventState",
        type: "POST",
        data: "obj=" + JSON.stringify(stateObj), 
        success: function(data){
            alert(data);
        },
        error: function(a, b, c){
            alert("error");
        }
    });
}

我試圖注釋掉ajax請求。 這樣做警報框將按預期方式觸發。

我有一個解決方法添加window.location.reload（）; 警報（數據）之后。 但是我認為這不是必須的。 我也嘗試過異步發送請求：false; 模式沒有成功。 我沒主意了。

題

發送ajax請求時，為什么每次單擊都不會觸發ifClicked事件？

附加信息

執行腳本時，控制台沒有任何錯誤。 第二次運行均無任何警報。

我什至無法在jsfiddle中重現該問題。

有任何線索嗎？

編輯

我剛剛使用新的iCheck beta源代碼進行了測試。 然后事件就會按原計划觸發，但還會引發其他一些問題。 因此，這似乎源於iCheck的錯誤。 （但我可能是錯的）。

Answer 1

在Ajax響應之后重新初始化事件處理程序怎么樣？

$(function () {
    initClickedHandler();
});

function initClickedHandler(){
    $("input[type=checkbox]").on("ifClicked", function(){
            alert("init");
            var stateObj = {
                id: $(this).attr("data"),
                mode: $(this).attr("rel"),
                state: null
            }

            if($(this).prop("checked") === false){
                stateObj.state = 1;
            }
            else{
                stateObj.state = 0;
            }
            updateState(stateObj)
    });
}


function updateState(stateObj){
    alert("updating");
    $.ajax({
        url: "moduleAjax.php?module=" + stateObj.mode + "&page=eventState",
        type: "POST",
        data: "obj=" + JSON.stringify(stateObj), 
        success: function(data){
            alert(data);
            initClickedHandler();
        },
        error: function(a, b, c){
            alert("error");
        }
    });
}

另外，在updateState（stateObj）之后，您缺少分號

Answer 2

通過使用jQuery的.click .click()方法（ jsfiddle ），您可能可以完全避免此問題：

$('input[type="checkbox"]').on('click', function() {

    var stateObj = {
        id: $(this).attr("data"),
        mode: $(this).attr("rel"),
        state: null
    }

    if( $(this).prop('checked') === false ) {
        stateObj.state = 1;
    } else {
        stateObj.state = 0;   
    }

    updateState(stateObj);
});

function updateState(stateObj) {
    console.log(stateObj.state);   
}