Bootstrap Popover + Meteor 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按钮时,bootstrap会获取#popover-content的内容并将其放在带有.popover类的新div中.如果要查看如何在动态创建的元素上绑定事件,则应检查此答案.(解决方案是使用on())

现在,对于正在发生的事情,Meteor正在#popover-content内部的.addNewLetter上绑定一个click事件,而不是在div.popover内部动态创建的元素.addNewLetter上绑定,这就是它无法正常工作的原因.我找到了一个解决方法:

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