Question

我正在创建一个包含动态数量选项的表单。删除选项适用于从一开始就存在的项目，但无法删除动态生成的项目。任何人都有线索？

HTML：

<div class="options">
  <div><input type="text" name="option[]" value="Option A"> <a href="#" class="delete_option">Delete</a></div>
  <div><input type="text" name="option[]" value="Option B"> <a href="#" class="delete_option">Delete</a></div>
  <div><input type="text" name="option[]" value="Option C"> <a href="#" class="delete_option">Delete</a></div>
</div>
<a href="#" class="new_option">Add a new option</a>

使用Javascript：

jQuery('a.new_option').click(function(){
  jQuery('div.options').append('<div><input type="text" name="option[]" value=""> <a href="#" class="delete_option">Delete</a></div>');
});

jQuery('a.delete_option').click(function(){
  jQuery(this).parent('div').fadeOut();
});

Answer 1

您需要将event delegation用于动态创建的元素：

jQuery('div.options').on('click', 'a.delete_option', function(){
  jQuery(this).parent('div').fadeOut();
})

Answer 2

使用.on()

jQuery.on('click', 'a.delete_option', function () {
    jQuery(this).parent('div').fadeOut();
});

Event Delegation

Answer 3

您应该使用.on方法，以便将事件委托给新元素。

jQuery(document).on('click','a.delete_option',function(){
jQuery(this).parent('div').fadeOut();
});

这是一个新的小提琴 http://jsfiddle.net/rjC6C/

jQuery删除父onclick不适用于新元素

3 个答案: