jquery生成的按钮不起作用答案

【问题标题】：button generated by jquery not functioningjquery生成的按钮不起作用
【发布时间】：2017-08-04 12:09:18
【问题描述】：

我想用一个能够创建新输入文本字段的按钮和一个使用 jquery 的按钮制作一个表单。然后我新生成的按钮有问题，无法调用jquery动作。

$(document).ready(function(){
       $('.add').click(function () {
          $('#more').append('<input type=text />');
          $('#more').append('<button type="button" class="btn btn-danger remove"><i class="fa fa-minus-circle"></i></button>');
       });
    
       $('.remove').click(function(){
            alert('this text field should be removed');
       })
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-primary add" type="button"><i class="fa fa-plus-circle"></i></button>
    <div id="more"></div>

当add 按钮被点击时，它会附加新的输入文本和按钮。但是这个带有remove 类的新按钮在单击时无法触发。任何人都可以在这里找到我想念的东西吗？

【问题讨论】：

删除点击事件处理程序在代码执行时应用，大概是在您点击添加按钮之前。由于在执行时新按钮不存在，因此事件处理程序未绑定到它们。
使用$(.'remove').on('click', ...，这应该可以。了解直接和委托事件here。
Is there an "Update" function for jQuery?的可能重复

标签： javascript jquery html

【解决方案1】：

.on 会将一个或多个事件的事件处理函数附加到所选元素。

.click 会将事件附加到文档中已存在的控件。

$(document).ready(function() {
  $('.add').click(function() {
    $('#more').append('<input type=text />');
    $('#more').append('<button type="button" class="btn btn-danger remove"><i class="fa fa-minus-circle"></i>Remove</button>');
  });

  $('#more').on('click', '.remove', function() {
    alert('this text field should be removed');
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<button class="btn btn-primary add" type="button">Add<i class="fa fa-plus-circle"></i></button>
<div id="more"></div>

【讨论】：

【解决方案2】：

您需要在$('.add').click(function(){ ... }) 中添加$('.remove').click(function()...)。

当前脚本只在页面加载时过滤页面上的.remove元素。

【讨论】：

是的，它正在工作。但我更喜欢桑卡尔的回答。无论如何，谢谢。