jQuery的切換動態生成的嵌套元素

我目前設計的網頁呈現其產生<li>在其中所附一個<h6>元件（這篇文章的標題）元素（<ul>內）類似Twitter的用戶輸入，並且下方的<p>元件（內容）。這個工作，因此元素的輸入和生成不是問題。
但我想要做的是使用jQuery 隱藏帖子的內容，並切換它，當我點擊帖子的標題。問題是，事件處理程序似乎只適用於每一秒的職位。每當我發佈一次，名單上的第一後可切換，第二個不行，三是等jQuery的切換動態生成的嵌套元素

從我在一些答案已經看到了，我已經試過.click()方法，該方法.on() ，我試圖在條件下將.toggle()替換爲.hide()和.show()，然後創建類並使用display:none切換點擊。這是我的最後一站，上面的段落描述了結果。這裏的事件處理程序：

$('.postinstance').on("click", "h6.postname", function() { 
    $(this).siblings().toggleClass('postOff'); 
});

的.siblings()實際上只是帖子內容，但這是我能得到接近我想要的唯一途徑。當我將$(this).siblings()替換爲內容元素的實際類別時，當我點擊任何標題時，每篇文章的內容都會切換。
當我點擊它時，如何讓每個帖子單獨打開？

Here's a JSFiddle isolating the input & posts part.

我都對着堆棧溢出等地，甚至教程徹底，要解決這個問題，但儘管類似的問題都沒有發現自己的答案提供瞭解決方案。

來源

2016-03-06 delyodobrev

您不應將事件處理程序直接附加到動態生成的元素，而應使用一些常見的父元素。這裏是一塊代碼片段的，我改變了選擇，一切都開始工作：

$('.postlist').on("click", "h6.postname", function() { 
    $(this).siblings().toggleClass('postOff'); 
});

重要提示：（「 postbtn」）。必須拉出這段代碼從$單擊（..）一個級別，否則爲偶數的切換職位將無法正常工作！

來源

2016-03-06 15:22:14

謝謝你，我改變了選擇和移動的一段代碼，它就像一個魅力！因此，問題發生是因爲選擇器無法直接識別動態創建的元素，並且依賴於單擊'.postbtn'上的事件？ – delyodobrev

不客氣:)以下是在發佈按鈕時單擊代碼時發生的事情：1）創建帖子並將其前置到列表中2）爲所有**帖子標題創建onclick處理程序（甚至是之前存在的標題你的新帖子）。這導致一些帖子標題有多個點擊處理程序，它們按順序發射，因此切換相應的帖子開啓和關閉以及開啓和關閉......這就是爲什麼你無法準確地打開每一個帖子！ @ user3722861 –

非常感謝！我非常渴望理解:)每當我遇到另一個動態世代時，都會記住這一切（這經常會發生，我猜想：D） – delyodobrev

並移動了這一點，點擊處理程序：

$('.postlist').on("click", "h6.postname", function() { 
     console.log(this); 
     $(this).siblings().toggleClass('postOff'); 
});

來源

2016-03-06 15:28:32 irfan

jQuery的切換動態生成的嵌套元素

回答

相關問題