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'); 
    }); 
}