Question

当文档准备就绪时，我通过发布请求从服务器获取一些数据，并通过追加将其填入 HTML作为标记。单击该标记时，将显示注释textarea。当您点击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中工作但不是在我的localhost中。你能说出原因，为什么会这样？

谢谢！

更新

我也试过这个

$(".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();
   }
});

编辑：回复：“嘿，那个代码有效，我不知道你是怎么做的，提到.comment.length你能更直接地描述它吗？”

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

当你执行$(".comment:hover")时，你要求jquery选择任何带有“comment”类的元素，该类目前还有鼠标。如果$(".comment:hover")返回的列表长度大于零，则表示您在“.comment”中点击了一个气泡。

虽然返回false或停止传播也应该有效。（dunno为什么在你的情况下它不起作用，虽然我没有看到完整的代码）

编辑2：

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

编辑3：还有一件事：

你没有副作用，因为即使你重新定义的点击也只有停止传播，但你应该在

中返回false之前添加停止传播。

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

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

Answer 2

由于post方法是异步的。你绑定$（“。comment”）之前它存在。移动

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

后

$(".keywords-set").append('<div class="keyword-item"><span class="keyword" id="keyword-'+count+'">'+data[i]+'</span><textarea class="comment" id="comment-'+count+'"></textarea></div>');

应该有用。

jquery - 使用event.stopPropagation（）

2 个答案: