jQuery切换动态生成的嵌套元素

Question

我目前正在设计一个网页，呈现一个类似Twitter的用户输入，该输入生成一个<li>（在<ul>内）元素，其中附加了一个<h6>元素（帖子的标题）和一个<p>元素（内容）。这是有效的，因此元素的输入和生成不是问题。
但是我想做的是使用jQuery隐藏帖子的内容，并在我单击帖子标题时切换它。问题是事件处理程序似乎只适用于每隔一个帖子。每当我再次发布时，可以切换列表中的第一篇帖子，第二篇不，第三篇是，依此类推。

从我看到的一些答案来看，我尝试了.click()方法，.on()方法，我尝试将.toggle()替换为.hide()并在条件下.show()，然后创建了一个带有display:none的类，以便在单击时切换。这是我的最后一站，结果在上一段中描述。下面是事件处理程序：

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

.siblings()实际上只是帖子内容，但这是我接近我想要的唯一方法。当我将$(this).siblings()替换为内容元素的实际类时，当我单击任何标题时，每个帖子的内容都会切换。
当我点击每个帖子时，如何使每个帖子单独打开？

这是一个隔离输入和发布部分的 JSFiddle。

我已经彻底研究了Stack Overflow和其他地方，甚至是教程，以解决此问题，但是尽管发现了类似的问题，但没有一个答案提供解决方案。

Answer 1

不应将事件处理程序直接附加到动态生成的元素，而应使用一些常见的父元素。这是您的片段，我在其中更改了选择器，一切开始工作：

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

重要提示：您必须将这段代码从 $（'.postbtn'）.click（..） 中拉出一级，否则对于偶数个帖子切换将不起作用！

Answer 2

并将其

移出单击处理程序：

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