javascript - JavaScript 排队点击事件

Question

我有一长串像这样的复选框：

 <input class='masterCheckbox' type='checkbox' onclick='clickAll()' />

 <input class='modifyDb' type='checkbox' onclick='ajaxCall(someId)' />
 <input class='modifyDb' type='checkbox' onclick='ajaxCall(someId)' checked />
 <input class='modifyDb' type='checkbox' onclick='ajaxCall(someId)' checked />
 ... lets say there's exactly 100 ...
 <input class='modifyDb' type='checkbox' onclick='ajaxCall(someId)' />
 <input class='modifyDb' type='checkbox' onclick='ajaxCall(someId)' />
 <input class='modifyDb' type='checkbox' onclick='ajaxCall(someId)' checked />

该ajaxCall()函数对 PHP 页面进行 ajax 调用（使用 jQuery）以在数据库中进行一些更改。

我希望masterCheckbox复选框在选中时通过所有未选中的复选框并单击它们，以便它们每个都进行单独的 ajax 调用。

使用 jQuery，我设法获取所有modifyDb复选框，然后在每个元素上使用.each()名为 a 的函数。.click()这在视觉上有效；复选框已切换，但未进行 ajax 调用。

这是因为 ajax 调用太快了吗？我可以以某种方式将函数调用排队吗？

Answer 1

使用trigger.
以下代码重复onclick所有.modifyDb

function clickAll() {
    $('.modifyDb').trigger('click');
}

参考

• http://api.jquery.com/trigger/

Answer 2

我会重新排序并摆脱所有内联事件处理程序。像这样的东西：

<input class='masterCheckbox' type='checkbox' />

<input class='modifyDb' type='checkbox' data-id='someId)' />
<!-- .... -->

然后绑定它们：

$(".modifyDb").click(function() {
    var id = $(this).data("id");
    ajaxCall(id);
});

对于主复选框：

$(".masterCheckbox").click(function() {
    $(".modifyDb").each(function() {
        var id = $(this).data("id");
        ajaxCall(id);
        // or if you really must, you could use trigger() here
    })
});

Answer 3

这将触发尚未选中的框上的点击事件

function clickAllUnchecked(){
    $('.modyfDb').not(':checked').trigger('click')
}