Question

我的项目有一个使用jQuery UI Tabs的页面。每个选项卡使用AJAX调用文件，每个文件都显示一个列表。这些列表中的每个<li>元素都有一个子元素，如<input type = "checkbox" />。

当我点击checkbox上的任意位置时，我需要检查或取消选中<li>元素（取决于其先前的状态）。

我尝试过使用像<li onclick = "javascript: CheckboxClick();">这样的函数，但它工作正常，直到用户试图点击实际的复选框。然后，该函数与复选框的操作同时运行，导致它们相互抵消。

我尝试在$(document).ready()上使用类似版本的函数，以便排除复选框子项触发此函数，但列表是使用AJAX创建的，并且没有初始DOM的一部分。该功能无效。我尝试使用click代替on()，因为根据w3schools on() method explanation它声明“on（）方法将适用于当前和FUTURE元素（就像创建的新元素一样）一个脚本）。“我没有成功。

后者的尝试是这样的：

$("li.single-line.restore-manager").on("click", function () {
    //code

}).children('input[type="checkbox"]').click(function (e) {

    return false;
});

实际上没有任何反应。

有关如何使这项工作的任何想法？

Answer 1

这是你要找的吗？

$(document).on("click", "li.single-line.restore-manager", function (e) {
    if (e.target.nodeName != "INPUT") {
        var myChks = $(this).children(":checkbox");
        $.each(myChks, function () {
            if ($(this).is(":checked") === true) {
                $(this).prop("checked", false);
            } else {
                $(this).prop("checked", true);
            }
        });
    };
});

JSFIDDLE

Answer 2

更新了处理复选框的代码：

$(document).on("click", 'li.single-line.restore-manager', function(e){ // Use document or parent of li which exists before `AJAX` call
    if (e.target.nodeName != 'INPUT') {
        // your code here
    }
});

在AJAX之后单击jQuery元素

2 个答案: