点击事件不会在ajax事件后触发

我有一个使用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（）; 警报（数据）后。 但在我看来，这不应该是必要的。 我也尝试在async中发送请求：false; 模式没有成功。 我没有想法。

题

为什么在发送ajax请求时，每次点击都不会触发ifClicked事件，只有第一次？

附加信息

执行脚本时，控制台中不会出现错误。 第二次运行都没有任何警报。

我甚至无法在jsfiddle中重现问题。

任何人有任何线索？

编辑

我刚刚测试了新的iCheck测试版源代码。 那么这些事件就会像他们应该被解雇一样，但是其他一些问题也会被提出来。 所以这似乎是来自我iCheck的bug。 （但我可能是错的）。

---

如何在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）之后缺少一个分号

---

您可以通过使用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);   
}

链接地址: http://www.djcxy.com/p/56021.html

上一篇: Click event doesn't fire after ajax event

下一篇: Toggle the visibility of divs based on checkboxes using Javascript