jQuery 复选框（在 ul > li 下）检查事件答案

【问题标题】：jQuery checkbox (under a ul > li) check eventjQuery 复选框（在 ul > li 下）检查事件
【发布时间】：2016-05-01 00:30:33
【问题描述】：

我有这段代码来处理复选框检查事件：

<html>

<head>
  <style>
    #leftPane {
        width: 200px;
        height: 500px;
        border: 1px solid;
        float: left;
    }
    #rightPane {
        height: 500px;
        width: 600px;
        border: 1px solid;
        border-left: 0px;
        float: left;
    }
    #addTo {
        border: 1px solid;
    }
    #addTo input {
        border: none;
    }
    #showList ul{
        list-style: none;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
        $('#todoItem').keypress(function(e){        
            if (e.which ==13) {
                var item = $('#todoItem').val();
                var chkbox = "<input type='checkbox' name='"+item+"'>"
                $("#showList ul").append("<li>"+chkbox+""+item+"</li>");
            }
        })
        $("#showList li ul input[type=checkbox]").change(function(){
            var $this = $(this);
            alert("tell me");
            /*if ($this.is(':checked')) {
                $(this).parent().remove();
            }*/
        }) 
    })
  </script>
</head>

<body>
  <div id="leftPane">
    <ul>
      <li>Shopping List</li>
      <li>Movie List`</li>
      <ul>
  </div>
  <div id="rightPane">
    <p>Let's add some todo</p>
    <div id="addTo">
      <input id="todoItem" type="text" placeholder="Add a todo"></input>
    </div>
    <div id="showList">
      <ul>
      </ul>
    </div>
  </div>
</body>

当我点击复选框时，事件处理程序

( $("#showList li ul input[type=checkbox]").change(function(){ )

未触发（不出现警报）。如果我选择

$('#showList > ul").click (...)

然后事件处理程序触发，但这意味着单击ul 中的任何位置不一定是checkbox。

我按照这些链接来开发上述代码：

jQuery checkbox checked state changed event Use JQuery to check a checkbox in a parent list-item?

jsfiddle 页面：https://jsfiddle.net/

任何帮助将不胜感激。

谢谢

【问题讨论】：

有效的那个：$('#showlist ul li').on('change', 'input[type=checkbox]', function(event) { var $this = $(this ); $this.parent().remove(); });

标签： javascript jquery html

【解决方案1】：

我的解决方案

$(document).on('change', "#showList ul li input[type=checkbox]", function(){
        var $this = $(this);
        alert("tell me");
        /*if ($this.is(':checked')) {
            $(this).parent().remove();
        }*/
    })

您的解决方案中的问题：

你在ul之前写过li；您期望li 包含ul 标记，事实并非如此，而是相反
您在运行时动态添加复选框，因此正常的事件处理程序不会像.change 那样工作。您需要实施 event delegation 技术才能在您的情况下工作。
在这段代码$('#showList > ul").click (...)你知道你的错误是什么

大多数浏览器事件从最深处冒泡或传播，文档中最里面的元素（事件目标）。委托活动具有可以处理后代事件的优点稍后添加到文档中的元素。

通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要。 document 对象保证一直存在。所以，document 对象会将change 事件委托给匹配选择器#showList ul li input[type=checkbox] 的元素。

【讨论】：

【解决方案2】：

当您注册onChange 事件时，您会为当前页面中的匹配元素执行此操作。新元素不会向它们注册该事件侦听器。

要解决此问题，您可以在创建项目时添加事件，也可以使用event delegation。

利用冒泡DOM 和事件委托的事件，在静态父级（即#showlist）上注册事件，如下所示：

$('#showlist').on('change', 'input[type=checkbox]', function(event) {
    // your handler here
});

会发生什么，当您单击所需的元素时，事件将bubble 直到它到达一个为其类型注册了处理程序的元素。您会注意到event.target 是实际的事件目标，而不是处理事件的元素。

除此之外，您的选择器应该是#showlist ul li input[type='checkbox']，而不是#showlist li ul input[type='checkbox']。

【讨论】：

你的想法几乎成功了。我不得不对子选择器进行一些修改。

【解决方案3】：

让我们按照KISS方法。

<script>
    $(document).ready(function () {
        $('#todoItem').change(function () {
            $('<li />').append(
                $('<input type="checkbox" name="' + this.value + '" id="' + this.value + '">')
                .click(function () {
                    var $this = this;
                    alert('tell me ' + $this.name);
                })//click
                )//append
                .append('<label for="' + this.value + '">' + this.value + '</label>')
            .appendTo($("#showList ul"));
        });
    });
</script>

这是你想要的吗？

【讨论】：

你的想法很不错。但是，需要进行一些修改，因为点击处理程序也会拍摄所有其他列表，例如“购物清单”等。
所有这些都取决于您。例如，element.name 和 element.id 不应包含空格。这是你修复细节的工作。