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中。如果您想了解如何在动态创建的元素上绑定事件you should check this answer。（解决方案是使用on()）

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

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

Bootstrap Popover + Meteor JS点击事件

1 个答案: