【问题标题】：listening for click event on dynamic content and determining parent element监听动态内容的点击事件并确定父元素
【发布时间】：2014-11-12 10:34:08
【问题描述】：

我有一堵动态生成的帖子墙，通过它我试图重现 Facebook 的相同功能，当您单击评论链接时，它会将焦点放在其下方的文本区域上。但是，我似乎无法在那堵墙内找到正确的文本区域。假设我们有 15 个帖子，因此我们有 15 个评论链接和文本区域可供评论。现在，我使用 jquery 来监听那个事件...

$(".wall-post").on("click", ".comment", function (event) {

event.preventDefault();

var id = $(".wall-post").attr("id");

//this keeps logging the same id
//I have also tried referring to 'this' but that does not work 
console.log(id);    

$("#"+id+ " .post-comment").focus();

});

我想也许可以使用冒泡来获取被点击的实际链接的父元素的 id。不幸的是，我认为我实际上不能为此目的使用冒泡。所以现在我只是在黑暗中拍摄。

欢迎提出建议

【问题讨论】：

var id = $(".wall-post").attr("id"); 应该是 var id = $(this).attr("id"); 或 this.id 但你说这不起作用？它应该。您可以发布 HTML 示例吗？

标签： jquery html jquery-traversing

【解决方案1】：

我相信标记会是这样的（简写）：

.wall-post#<id>
    .content (or whatever)
    .comments
        .comment <-- [1]
    .post-comment

在您的点击处理程序中，this 将引用评论节点本身，如上面的[1] 所示。

所以你想做的就是从那里返回向上到包含它的.wall-post，然后在其中找到.post-comment节点。

那就是：

$(this).closest('.wall-post').find('.post-comment').focus();

您甚至根本不需要搞乱提取id！

【讨论】：

【解决方案2】：

你的问题在于

var id = $(".wall-post").attr("id");

通过这一行，您可以搜索具有“wall-post”类的对象并获取它们的 ID。相反，您需要做的是获取实际单击的对象。

尝试使用

var id = $(this).attr("id");

“this”与实际点击的对象有关。

我建议做的是

$(this).find(".post-comment").focus();

使用“this”，您可以使用 find 搜索元素（例如评论后）并关注它们。

【讨论】：

【解决方案3】：

您可以使用closest 查找父帖子，然后在父元素的上下文中使用find 查找文本区域。请参阅下面的演示。

$(function() {
  $("#wall").on('click', '.add-comment', function(e) {
    e.preventDefault();
    $(this)
      .closest('.post')
      .find('.post-comment')
      .focus();
  });
});

.post {
  width: 300px;
  padding: 2px;
  margin: 4px;
  border: 1px solid lightblue;
}
.post-text {
  margin-top: 0px;
  margin-bottom: 2px;
  padding: 0px;
}
.add-comment {
  display: block;
  margin-top: 0px;
  margin-bottom: 15px;
}
.comment {
  display: block;
  border-top: 1px solid lightgray;
  background-color: #f6f7f8;
}
.post-comment {
  margin-top: 5px;
  border-radius: 4px;
  width: 95%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wall">
  <div class="post">
    <p class="post-text">The rain in spain falls mainly on the plain.</p>
    <a href="#" class="add-comment">comment</a>
    <div class="comment-section">
      <span class="comment">This is cool!</span>
      <span class="comment">I like it!</span>
      <textarea class="post-comment" placeholder="Add a comment..."></textarea>
    </div>
  </div>
  <div class="post">
    <p class="post-text">Super-cali-fragialistic-expi-ali-docious</p>
    <a href="#" class="add-comment">comment</a>
    <div class="comment-section">
      <span class="comment">That's weird!</span>
      <textarea class="post-comment" placeholder="Add a comment..."></textarea>
    </div>
  </div>
</div>

【讨论】：