JS事件冒泡DOM

Question

在我的流星应用程序我有意见，并在这些意见中，我有一个按钮“回复”，当我点击回复表单留下额外的评论将打开。

问题是，当我点击一个回复按钮时，它会打开所有其他评论以及单击的窗体，而不是只点击我单击的窗体。

这是我的代码

template.replyComments.events({ 
    'click #replyToCommentButton2': function(e) { 
     $(".commentToShow").show(); 
    }, 
    //... 
)}; 

和HTML

<button class="btn waves-effect waves-light" data-show="#form2" id="replyToCommentButton2">Reply 
    <i class="mdi-content-send right"></i> 
    </button> 

Answer 1

尝试使用stopPropagation和缩小的.commentToShow类，也许增加一个数据ATTR的按钮你点击，将告诉你要显示的元素：

HTML：

<a id="replyToCommentButton2" data-show="#form2">Reply</a> 

个

JS：

template.replyComments.events({ 
'click #replyToCommentButton2': function(e) { 
     e.stopPropagation(); 
     $(this).parent().find('.commentToShow').show(); 

}, 

)}; 

Answer 2

有你需要做两件事情，其中​​之一就是停止冒泡事件链，第二个是只引用当前对象的传播活动（参考与此），因为你的目标是所有的类而不是当前的对象。

template.replyComments.events({ 
'click #replyToCommentButton2': function(e) { 
    e.stopPropagation(); 
    var targetedForm = $(this).data("show"); 
    $(".commentToShow", targetedForm).show(); 

}, 

这将有助于了解事件传播：What's the difference between event.stopPropagation and event.preventDefault?

Answer 3

所以这是没有真正回答你的问题，但除非你使用的是一些第三方的lib，需要你来操作使用jQuery的DOM有一个更流行的方法来解决这个问题。

// comment.coffee 
Template.comment.created = -> 
    # Keep the state of the comment in a ReactiveVar on the template instance 
    this.showReplyField = new ReactiveVar 

Template.comment.events 
    "click [data-reply]": (e, tmpl) -> 
    e.stopPropagation() 
    # If the reply field is open then close it and vice verse 
    currentState = tmpl.showReplyField.get() 
    tmpl.showReplyField.set !currentState 

Template.comment.helpers 
    reply: -> 
    # Get the state and expose it to the template. It will update reactively when the value changes and only for this template/comment. 
    Template.instance().showReplyField.get() 

// comment.html 
<template name="comment"> 
    <p>{{text}} </p> 
    {{#if reply}} 
     {{> newComment}} 
    {{else}} 
     <button class="button" data-reply>reply</button> 
    {{/if}} 
</template> 

<template name="newComment"> 
    <!-- Your new comment html here --> 
</template> 

请注意，您将需要meteor add reactive-var来添加reactive var包。

这就是我在我的博客评论包中使用的内容。如果您愿意，可以查看source code here。

如果你不喜欢coffeescript你可以translate it。

如果你还喜欢使用jQuery，你应该使用Meteor自带的模板优化版本。在事件处理程序中，它可用作tmpl.$，并且只会选择模板中的元素（因此也会包含子元素）。

Answer 4

这就是答案，我是有这个问题（有人在流星论坛回答）

template.replyComments.events({ 
    'click #replyToCommentButton2': function(e, template) { 
     template.$(".commentToShow").show(); 
    }, 
    //... 
)};