Javascript jQuery复选框（在ul>li下）检查事件_Javascript_Jquery_Html

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

javascript jquery html

Javascript jQuery复选框（在ul>li下）检查事件,javascript,jquery,html,Javascript,Jquery,Html,我有以下代码来处理复选框检查事件： <html> <head> <style> #leftPane { width: 200px; height: 500px; border: 1px solid; float: left; } #rightPane { height: 500px; width: 600px; bord

我有以下代码来处理复选框检查事件：

<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 > ul").click (...)

然后触发事件处理程序，但这意味着单击ul中的任意位置不一定要选中复选框

我通过以下链接来开发上述代码：

JSFIDLE页面：

任何帮助都将不胜感激

谢谢

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

要解决此问题，可以在创建项目本身时添加事件，也可以使用

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

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

将发生的情况是，当您单击所需的元素时，事件将冒泡出现，直到它到达其类型具有已注册处理程序的元素为止。您会注意到event.target是实际的事件目标，而不是处理事件的元素

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

我的解决方案

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

解决方案中的问题：

你在ul之前写过李；你希望李能附上ul标签，但事实并非如此您正在运行时动态添加复选框，所以普通事件处理程序不会像.change那样工作。您需要实现事件委派技术才能在您的案例中工作。在此代码中$'showList>ul。单击。。。你知道你犯了什么错吗大多数浏览器事件从最深处冒泡或传播，最里面的元素是文档中的事件目标。委托事件具有可以处理来自后代的事件的优势以后添加到文档中的元素

通过选择在附加委派事件处理程序时保证存在的元素，可以使用委派事件来避免频繁附加和删除事件处理程序。文档对象保证始终存在。因此，document对象将把更改事件委托给与选择器showList ul li input[type=checkbox]匹配的元素。

让我们遵循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不应包含空格。这是您修复详细信息的工作。工作的工作：$'showlist ul li'。关于'change'，'input[type=checkbox'，functionevent{var$This=$This；$This.parent.remove；}；

<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>