Question

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

＆＃13;

$(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');
       })
    });

＆＃13;

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

＆＃13;

单击add按钮时，它会附加新的输入文本和按钮。但是这个带有remove类的新按钮在单击时无法触发。谁能找到我想念的东西？

Answer 1

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

当前脚本仅在加载页面时过滤页面上的Industry Department JobTitle元素。

Answer 2

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

由jquery生成的按钮无法正常运行

2 个答案: