为什么 jquery 不删除附加的 div

Question

我在表单中有字段并允许用户添加或删除项目。第一个附加的突出显示会删除，但任何添加的突出显示都不会删除。

我尝试了以下方法，但没有运气jQuery $(this).remove() not working after append

这是http://jsfiddle.net/3PzmH/3/下面代码的jsfiddle

<!-- html -->
<div class="features"></div>

// js
var highlight = '<div class="form-group"><label for="highlight" class="col-sm-3 col-lg-2 control-label">Hightlight:</label><div class="col-sm-9 col-lg-3 controls"><input type="text" name="highlight_name[]" data-rule-required="true" class="form-control" value="Hightlight Name"></div><div class="col-sm-9 col-lg-7 controls"><textarea name="highlight_description[]" class="form-control" rows="3" placeholder="Description for highlight"></textarea><a href="" class="pull-right showhouse-text remove_highlight"><i class="fa fa-plus"></i> Remove Highlight</a></div></div>';
$('.features').append(highlight);

$('#add_highlight').click(function(){
    $('.features').append(highlight);
});

$('.remove_highlight').on("click", function(){
    $(this).closest('.form-group').remove();
});

Answer 1

将事件委托给静态父元素

$('.features').on("click", '.remove_highlight', function(){
    $(this).closest('.form-group').remove();
});

FIDDLE

Answer 2

动态添加的元素需要使用事件委托

$('.features').on("click",'.remove_highlight', function(){
    $(this).closest('.form-group').remove();
});

DEMO

Answer 3

因为动态添加的元素没有绑定任何函数。

使用事件委托

$('.features').on('click', '.remove_highlight', function() {
    $(this).closest('.form-group').remove();
});

Answer 4

请使用委托。请参阅更新的小提琴。

http://jsfiddle.net/3PzmH/7/

$(document).delegate('.remove_highlight',"click", function(){
    $(this).closest('.form-group').remove();
});