如何在jQuery中添加和刪除手風琴中的「行」

Question

我只想讓用戶能夠根據自己的意願添加和刪除行。

jsFiddle的快速試用將顯示它適用於已經在html中的行，但任何添加後的行（使用append）不能以相同的方式刪除。

jsFiddle - 解釋/顯示是怎麼回事

$('.removeBtn').click(function(){ 
     $(this).parent('div').next('div').andSelf().remove(); 
}); 
$('#add_item').click(function(){ 
    $('#accordion').append('<div><a href="#">Round 2</a><div class="removeBtn">x</div></div><div><div class="title">Question 1</div></div>').accordion('destroy').accordion(); 
}); 

上面的代碼顯示瞭如何在嘗試添加/刪除的行

在這裏，最簡單的方法是在HTML：

<div id="accordion"> 
    <div><a href="#">Round 1</a> 
    <div class="removeBtn">x</div> 
    </div> 
    <div> 
    <div class="title">Question 1</div> 
    </div> 

</div> 
<div id="add_item">Add</div> 

Answer 1

您需要使用事件委派，因爲按鈕是動態添加的

$(document).on('click', '.removeBtn', function(){ 
    $(this).parent('div').next('div').andSelf().remove(); 
    return false; 
}); 

演示：Fiddle