javascript - jquery 生成的按钮不起作用

Question

我想制作一个带有按钮的表单，该按钮能够创建新的输入文本字段和使用 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 类的新按钮在单击时无法触发事件。任何人都可以在这里找到我想念的东西吗？

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