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 按钮时，引导程序都会获取 #popover-content 的内容并将其放入具有 .popover 类的新 div 中。如果您想了解如何在动态创建的元素上绑定事件，you should check this answer。 （解决方法是使用on()）

现在，对于正在发生的事情，Meteor 将点击事件绑定到 #popover-content 内的 .addNewLetter 上，而不是 div.popover 内动态创建的元素 .addNewLetter 上，这就是它不起作用的原因。我发现的一种解决方法：

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