Bootstrap Popover +流星JS單擊事件

Question

我試圖通過單擊引導彈窗窗口中的按鈕來觸發流星事件。但是，這個事件並沒有被解僱。

這裏是我的代碼：

<button name="newLetter" class="glyphicon glyphicon-plus newLetter" type="button" data-container="body" data-toggle="popover" data-placement="right"></button> 
    <div id="popover-content" class="hide"> 
     <textarea></textarea> 
     <button class='glyphicon glyphicon-ok btn btn-success btn-xs addNewLetter'></button> 
    </div> 

Template.templateName.events({ 
    'click .newLetter': function(e, t) { 
     $(".newLetter").popover({ 
      html: true, 
      title: 'New Letter', 
      content: function() { 
       return $("#popover-content").html(); 
      } 
     }); 
    }, 
    'click .addNewLetter': function(e, t) { 
     console.log('test'); 
    } 
}); 

任何幫助將不勝感激。

Answer 1

首先使用您的代碼，這不會在第一次點擊時顯示彈出窗口。你應該做的：

Template.templateName.rendered = function() { 
    $(".newLetter").popover({ 
     html: true, 
     title: 'New Letter', 
     content: function() { 
      return $("#popover-content").html(); 
     } 
    }); 
} 

如果你與你的調試器檢查，你會看到，每次點擊.newLetter按鈕時，自舉取＃酥料餅的內容的內容，並將其放置在一個新的div與一個類.popover。如果您想了解如何在動態創建的元素上綁定事件，請參閱you should check this answer。 （該解決方案是使用on()）

現在，對於正在發生的事情，流星結合內部＃酥料餅的內容，而不是在div.popover內動態創建的元素.addNewLetter上.addNewLetter click事件，這就是爲什麼它不工作。我找到了一種解決方法：

Template.templateName.rendered = function() { 
    $(document).on('click', '.addNewLetter', function() { 
     console.log('hey'); 
    }); 
}