javascript - Bootstrap Popover + Meteor JS 点击事件

Question

我正在尝试通过单击 Bootstrap 弹出窗口内的按钮来触发 meteor 事件。但是，事件没有被触发。

这是我的代码:

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

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

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