將.slideToggle 與動態生成的 div 一起使用

Question

我在顯示 MySQL 查詢的 while 循環中創建了 div。 我想用.slideToggle 隱藏和顯示它們。 我不能使用一個 class 因為這會觸發頁面上的每個特定 div 向下滑動。

我認為這會在 while 循環中重復並找到最接近的 toggleSectionDyn div id。 明顯不是。

<div class="actions"><a href="#" id="toggleButtonDyn">Add</a></div>
<div id="toggleSectionDyn">Some content</div>
<script>
  $("#toggleButtonDyn").click(function(){
    $(this).closest("#toggleSectionDyn").slideToggle("slow");
    return false;
  });
</script>

Answer 1

編輯： live 已被棄用。 考慮使用.on()

你想使用.live()

 $("#toggleButtonDyn").live('click', (function(){
    $(this).closest("#toggleSectionDyn").slideToggle("slow");
    return false;
  });

來自.live() api

.live() 方法能夠通過使用事件委托來影響尚未添加到 DOM的元素：綁定到祖先元素的處理程序負責在其后代上觸發的事件。 傳遞給.live() 的處理程序永遠不會綁定到元素； 相反， .live() 將一個特殊的處理程序綁定到 DOM 樹的根。

現在，在重新閱讀時，我想知道你到底在問什么。 您還必須確保每個<div>必須具有唯一的 ID。 您可以考慮使用.next('div')而不是.closest()

根據評論中的討論，我將使用.next('div') 查看昨天問題http://jsfiddle.net/ycpgD/ 中修改后的 jsfiddle

另外，我強烈建議使用唯一 ID。 如果它們不能是唯一的，則使它們成為類。

Answer 2

如果你稍微重構一下，你可以定位你所追求的 div。 （也許我在這里遺漏了這個問題，但我的解決方案非常簡單）。

http://jsfiddle.net/8nXvX/

<div class="actions">
    <div><a href="#">Add</a>
        <p>Some content</p></div>
    <div><a href="#">Add</a>
        <p>Some content</p></div>
</div>

  $(".actions a").click(function(){
    $(this).next('p').slideToggle("slow");
    return false;
  });

我想這取決於你在哪里生成<a> 。 如果要隱藏整個 MySQL 結果集，還是一次顯示/隱藏每一行？