jquery不能在.appended內容中工作

我有一個div，其內容是在加載時填充的（一組'span'標籤，每個刪除鏈接點擊刪除按鈕將刪除該範圍。新的「跨越」的標籤給它使用一個單獨的按鈕（每個都有自己的刪除按鈕）。初期加入跨度刪除按鈕做工精細，但新加入的人請不要刪除。jquery不能在.appended內容中工作

<div class="instances"> 
<span class="item">Instance 1 <a href="#" class="del">delete</a></span> 
<span class="item">Instance 2 <a href="#" class="del">delete</a></span> 
</div> 
<span class="addinstance">Add an instance</span> 


$('.addinstance').click(function() { 
$('.instances').append('<span class="item">More <a href="#" class="del">delete</a></span> '); 
}); 

$('.instances .del').click(function (event) { 
event.preventDefault(); 
$(this).parent('.item').hide(); 
});

退房小提琴我爲這個工作版本： http://jsfiddle.net/Ac7x6/3/

在小提琴：

單擊實例1上的刪除按鈕 - 正常工作。
點擊'添加實例'按鈕 - 這會添加一個新條目。
單擊新添加的實例上的'刪除'按鈕 - 不刪除。

我已閱讀了很多關於此問題的信息，包括jquery .on（）。只是不確定如何實現它們。

幫助！ :)

動態生成項目

來源

2014-02-06 HappyJupiter

'隱藏（）'只是隱藏該元素，不會將其刪除。 – Raptor

hide（）只是用於簡單的例子 – HappyJupiter

使用事件委託，如果你想刪除的項目，然後用remove()

$('.instances').on('click','.del',function (event) { 
    event.preventDefault(); 
    $(this).parent('.item').remove(); 
});

Fiddle Demo

來源

2014-02-06 03:25:52

我幾乎100％肯定我試過這個，它不工作...（很明顯，我沒有或它會工作哈哈！）謝謝你幫助，並感謝您在您的回覆中使用我的實際示例代碼 - 這有助於使其更清晰。 – HappyJupiter

檢查小提琴http://jsfiddle.net/Ac7x6/4/ –

試試這個，

$(document).on("click", '.instances .del', function (event) { 
    //your code 
});

來源

2014-02-06 03:29:57

jquery不能在.appended內容中工作

回答

相關問題