javascript - 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()使用内容元素的实际类，当我单击任何标题时，每个帖子的内容都会切换。
如何在我点击每个帖子时单独打开它？

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

我仔细查看了 Stack Overflow 和其他地方，甚至是教程，以解决这个问题，但尽管发现了类似的问题，但他们的答案都没有提供解决方案。

Answer 1

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

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

重要说明:您必须将这段代码从 $('.postbtn').click(..) 中拉出上一级，否则对于偶数个帖子切换将不起作用!