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

Question

我正在创建一个具有动态数量选项的表单。对于那些从一开始就存在的项目，删除选项效果很好，但动态生成的项目无法删除。有人知道吗？

JSFiddle:http://jsfiddle.net/Kxr4C/

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