Question

我的Dom中有一个包含文本框和按钮的现有div。当用户点击按钮时，会动态创建一个包含textBox和button的新Div。我想要什么要做的是，在动态重新创建时，应该删除单击的按钮。

<div id="phone" class="row">    
   <div class="col-md-6">
    <input type="text" name="txtTELEPHONENOs" id="txtTELEPHONENOs"/>
   </div>
<button class= "btnAddMore">Add More</button>
</div>


$(".btnAddMore").click(function () {

    $(this).remove();
    $('#phone').after('<div class="row"><div class="col-md-6"><input type="text"/> </div><button class= "btnAddMore">Add More</button></div>');

});

这里的问题是我的Jquery代码只运行一次，它删除了单击的按钮并仅重新创建一次。单击函数不会在第二次执行，而我希望它在每次单击时都可以工作。请任何人帮我解决这个问题吗？

Answer 1

您需要Event delegation将事件附加到动态添加的元素：

事件委托允许我们将单个事件侦听器附加到父元素，该元素将为匹配选择器的所有后代触发，无论这些后代现在是存在还是将来添加。

$("body").on('click','.btnAddMore',function () {
  $(this).remove();
  $('#phone').after('<div class="row"><div class="col-md-6"><input type="text"/> </div><button class= "btnAddMore">Add More</button></div>');
});

Answer 2

不要在div中添加按钮，这样就不需要一次又一次地删除按钮

full_names

检查这个小提琴 - ＆gt; https://fiddle.jshell.net/e20hc1wo/

使用Jquery

2 个答案: