jquery .click沒有看到.append（）代碼

我的問題很難說。所以我創建了我的問題的jsfiddle.net。jquery .click沒有看到.append（）代碼

我有一個div列表。每個div裏面都有一些文字和一個「X」。「X」是刪除父div。三個div和「X」工作正常。但是，如果我要添加一個按鈕，將新的div添加到列表中，那麼這些「X」不起作用。任何想法這個問題是什麼？我知道這可能是一些基本的JS DOM的東西。但我自我思考，只是不明白JS很好地解決這個問題。

請謝謝你的時間。

http://jsfiddle.net/JLxKJ/

$("#trigger").click(function() { 
    $("#participants_wrapper").append("<div class='participant'><a href='javascript:void(0)' class='delete_participant'>X</a>Appended</div>"); 
    return false; 
}); 
$(".delete_participant").click(function(){ 
    $(this).closest('div').remove(); 
}); 
<div id="participants_wrapper"> 
    <div class="participant"><a href="javascript:void(0)" class="delete_participant">X</a>already here</div> 
    <div class="participant"><a href="javascript:void(0)" class="delete_participant">X</a>already here</div> 
    <div class="participant"><a href="javascript:void(0)" class="delete_participant">X</a>already here</div> 
</div> 
<a href="javascript:void(0)" id="trigger">add this participant</a>

來源

2013-02-07 CS Studios

這個問題，：你刪除代碼更改。你需要使用'on'來處理委託事件過載。完成。 – gdoron

您只能將事件處理程序綁定到現有元素。 –

您需要委派事件最接近現有父在DOM：

$("#participants_wrapper").on("click", ".delete_participant", function(){ 
    $(this).closest('div').remove(); 
});

這是因爲jQuery不能把click事件的元素，因爲它在頁面加載時不存在，所以這會將事件放在父項上，但會影響子項

來源

2013-02-07 18:00:45 Jai

非常感謝你@jai。快速，清楚，直截了當。 –

@CSStudios如果您喜歡答案，請點擊旁邊的綠色勾號。您的問題將被標記爲已回答。 – SeinopSys

是的，我不得不等待。它現在在那裏。 –

，因爲您沒有將事件再次綁定到新元素。

您可以使用on()來解決這個問題。

$("#participants_wrapper").on("click", ".delete_participant", 
    function(){ 
     $(this).closest('div').remove(); 
    } 
);

來源

2013-02-07 18:01:28 epascarello

謝謝@epascarello –

對於動態添加的元素，請使用jQuery的.on() function。再次

$("#participants_wrapper").on('click', '.delete_participant', function() { 
    $(this).closest('div').remove(); 
});

jsFiddle example

來源

2013-02-07 18:02:26 j08691

謝謝@ j08691，但Jai打敗你。不過謝謝。 –

jquery .click沒有看到.append（）代碼

回答

相關問題