javascript - jquery - 使用 event.stopPropagation()

Question

当文档准备好后，我通过 post 请求从服务器获取一些数据，并通过追加将其填充到 HTML 作为标签。当您单击该标签时，将显示评论文本区域。当您单击 document 部分时，textarea 将关闭。这里的问题是我无法在textarea中输入文字，当我点击里面时，它被隐藏了。我尝试使用 event.stopPropagation() 但没有用。

这是我的 jquery 代码:

$.post("/person/keywords/get/", function(data){
    for(i=0; i<data.length; i++)
    {
        count = count + 1;
        $(".keywords-set").append('<div class="keyword-item"><span class="keyword" id="keyword-'+count+'">'+data[i]+'</span><textarea class="comment" id="comment-'+count+'"></textarea></div>');
    }
});

$(".keywords-set").on('click', "[id^=keyword]", function(event) {
    event.preventDefault();
    i = $(this).attr("id");
    i = i.split('-').pop();
    $("#comment-"+i).show();
    return false;
});

$(".comment").click(function(event) {
    event.stopPropagation();                     
});

$(document).click(function() {
    $(".comment").hide();
});

完整的 HTML 和 javascript 代码，请查看这里:https://gist.github.com/3024186

它正在 jsfiddle 工作但不在我的本地主机上。能说说原因吗，为什么会这样？

谢谢!

更新

这个我也试过

$(".keywords_set").on('click', ".comment", function(event) {
    event.stopPropagation();
});

event.stopPropagation() 不适用于通过 ajax 更新的 HTML 元素。但是适用于正常(已经给定的)元素。

Answer 1

执行此操作时:

$(".keywords_set").on('click', ".comment", function(event) {

您必须了解您正在捕获元素“.keywords_set”中的事件，并且您将在那里检查它是否通过“.comment”冒泡

这意味着在“.keywords_set”和“.comment”之间设置的任何其他“点击”事件也将激活。

停止传播或返回 false 只会影响“.keywords_set”冒泡到文档。

你可以这样做:

$(document).click(function() {
   if($(".comment:hover").length==0){
      $(".comment").hide();
   }
});

编辑:回复:“嘿，那段代码有效，我不知道你是怎么做到的。你能不能更详细地描述一下呢？”

当您执行任何 jquery 选择器时，都会返回一个数组。因此，如果您执行 $(".comment")，所有带有“.comment”类的 html 节点将在列表 [obj1, obj2, ..., objn] 中返回给您

当您执行 $(".comment:hover") 时，您是在要求 jquery 选择任何具有类“comment”且鼠标当前位于其上方的元素。这意味着如果 $(".comment:hover") 返回的列表的长度大于零，那么您会在点击“.comment”时遇到气泡。

尽管返回 false 或停止传播也应该有效。 (不知道为什么在你的情况下它不起作用，虽然我没有看太多完整的代码)

编辑 2:

我懒得看完整代码了。但是当你为评论设置点击事件时，评论还不存在。因此您添加的新评论不会被您的点击处理程序捕获。将它添加到 ajax 回调中，它将起作用:)

编辑 3:还有一件事:

你没有得到副作用，因为即使你重新定义的点击也只有停止传播，但你应该在返回 false 之前添加停止传播

$(".keywords_set").on('click', ".comment", function(event) {

因为在实践中，您拥有的所有其他评论将处理 N 次您要添加的点击事件被处理多次