Question

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

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

非常感谢任何帮助。

由于

Answer 1

我的解决方案

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

解决方案中的问题：

您在li之前写过ul;您希望li附上ul代码，而情况并非相反
您在运行时动态添加复选框，因此普通事件处理程序不会像.change那样工作。您需要实施event delegation技术才能适用于您的情况。
在此代码中$('#showList > ul").click (...)你知道你的错误是什么

大多数浏览器事件从最深处传播或传播文档中最内层的元素（事件目标）。委托活动他们可以从后代处理事件稍后添加到文档中的元素。

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

Answer 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']。

Answer 3

让我们按照KISS方法。

class CDistance
{
private:
    int feet;
    int inches;
    int feet2;
    int inches2;
    int five;

public:
    CDistance();
    CDistance(int, int, int, int, int);
    ~CDistance();
    void setDistt();
    void printDistt() const;
    void add(const CDistance&) const;
    void subtract(const CDistance&) const;
    void menu(const CDistance&) const;
    void inputDist(CDistance distList[], int size);
    void printAndAdd(const CDistance distList[], int size);
};

CDistance::CDistance()
{
    feet = 0;
    inches = 0;
    feet2 = 0;
    inches2 = 0;
    five = 0;
}

CDistance::CDistance(int f, int i, int f2, int i2, int fi)
{
    feet = f;
    inches = i;
    feet2 = f2;
    inches2 = i2;
    five = fi;
}

CDistance::~CDistance()
{
}

这是你想要的吗？

jQuery复选框（在ul＆gt; li下）检查事件

3 个答案: