1

文档准备好后，我通过发布请求从服务器获取一些数据，并通过 append 将其作为标签填充到 HTML 中。当您单击该标签时，将显示一个注释文本区域。当您单击该document部分时，文本区域将关闭。这里的问题是我无法在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 元素。但是适用于正常（已经给定的）元素。

4

2 回答 2

2

这样做时：

$(".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 或停止传播也应该有效。（不知道为什么在你的情况下它不起作用，虽然我没有看太多完整的代码）

编辑2：

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

编辑3：还有一件事：

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

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

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

于 2012-06-30T15:33:29.610 回答
0

由于 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>');

应该管用。

于 2012-06-30T15:45:56.993 回答