javascript - 为什么 Javascript 不能在附加模式下工作？

Question

我的 html 中有一个表，我使用 jquery 附加了表中的所有行。部分附加部分如下所示。我有一个输入部分来更改数字，但现在此输入点击不再起作用。

我想知道为什么？如果我将代码移回我的 html 表，它就可以工作。 另外，删除按钮也不起作用。我怀疑这与附加功能有关？

$('.bundle-main').append('<li class="td td-amount">\
       <div class="amount-wrapper ">\
          <div class="item-amount ">\
             <div class="sl">\
               <input class="min am-btn" name="" type="button" value="-" />\
               <input class="text_box" name="" type="text" value="3" style="width:30px;" />\
               <input class="add am-btn" name="" type="button" value="+" />\
              </div>\
              </div>\
              </div>\
              </li>');

PS:我想使用append的原因是因为我想动态控制我的内容并且我的css工作正常。

你知道为什么吗？

Answer 1

因为您的事件处理程序是在附加输入之前定义的。 您有 2 个选择:

No1。追加输入后，然后定义事件处理程序。

No2. 只需在包装器上使用 .on('click') 即可，如下所示:

$('.bundle-main').on('click', '.add.am-btn', function(){
  // To Do
});