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

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

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

重要提示：您必须从$（＆＃39; .postbtn＆＃39;）中提取这段代码。点击（..）一级，否则为偶数帖子切换不起作用！

Answer 2

将其移出点击处理程序：

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

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

2 个答案: