复选框onchange jquery发出问题

Question

我在最近的代码中遇到了一个奇怪的事情.

我有一个动态生成列表,其中每行包含一个复选框.我的意图是,如果复选框发生变化并得到确认,我的数据库将会更新.

问题是,它在我第一次改变时确实有效.但以下尝试没有.但是,如果我刷新页面,它会在我第一次更改时再次运行.

它必须是一些JavaScript的东西.

$(':checkbox').change(function() {
    if (confirm("Does the status of this survey really changed?")) {
        variable = $(this).val();
        $.post( "handler.php", { handler: '18', value: variable}, location.reload());
    }
});

PS:每次触发并且值发生变化时,也会警告"变量".

你能帮我解决一下吗？

提前致谢.

编辑:非常感谢所有答案.除了对事件委托的理解之外,帮助我的是,它对点击事件的效果更好.我仍然会试着理解在onblur触发onchange的重点是什么,但目前,保持onchange并没有帮助我.

Answer 1

正如您所提到的那样,动态生成行,您需要使用如下事件委托:

$(document.body).on("change",":checkbox", function() {
    if (confirm("Does the status of this survey really changed?")) {
        variable = $(this).val();
        $.post( "handler.php", { handler: '18', value: variable}, location.reload());
    }
});

如果$(document.body)OR $(document)是目标元素的容器,则可以使用最接近的父元素/容器而不是$(document.body)OR $(document).

事件委托允许我们将单个事件侦听器附加到父元素,该元素将为匹配选择器的所有后代触发,无论这些后代现在是存在还是将来添加.