Bootstrap Popover + Meteor JS点击事件

Bootstrap Popover + Meteor JS click event

本文关键字：事件 JS Meteor Popover Bootstrap      更新时间：2023-09-26

我试图通过点击引导弹出窗口内的按钮来触发流星事件。但是，事件没有被触发。

下面是我的代码:
   <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');
    }
});

首先使用您的代码，这不会在第一次单击时显示弹出窗口。你应该做的:

Template.templateName.rendered = function() {
    $(".newLetter").popover({
        html: true,
        title: 'New Letter',
        content: function() {
            return $("#popover-content").html();
        }
    });
}

如果你检查你的调试器，你会看到，每次你点击。newletter按钮，bootstrap取#popover-content的内容，并把它放在一个新的div类。popover。如果您想了解如何在动态创建的元素上绑定事件，您应该检查这个答案。(解决方案是使用on())

现在，对于正在发生的事情，流星绑定了一个点击事件在#popover-content中的。addnewletter，而不是在div.popover中动态创建的元素。addnewletter，这就是为什么它不工作。我找到了一个变通方法:

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