0

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

我需要的是checkbox当我单击<li>.

我尝试过使用这样的功能<li onclick = "javascript: CheckboxClick();">并且效果很好，直到用户尝试单击实际的复选框。然后，该功能与复选框的操作同时运行，导致它们相互取消。

我尝试使用类似版本的函数$(document).ready()来排除复选框子项触发此函数，但列表是使用 AJAX 创建的，并且没有初始 DOM 的一部分。该功能不起作用。我尝试使用click而不是on()，因为根据w3schools on() 方法解释，它声明“on() 方法将适用于当前和未来元素（如脚本创建的新元素）。” 我没有成功。

后一种尝试是这样的：

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

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

    return false;
});

实际上什么也没发生。

关于如何完成这项工作的任何想法？

4

2 回答 2

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

于 2013-07-11T13:49:45.387 回答
0

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

$(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
    }
});
于 2013-07-11T13:39:57.637 回答