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(); 
    }, 
    //... 
)};