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');
    }
});

任何帮助都将不胜感激。

- user3475602

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内部绑定了一个点击事件，而不是在动态创建的元素.popover内部绑定.addNewLetter，这就是为什么它不起作用的原因。我找到的一个解决方法：

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

- Julien Le Coupanec

---

试一下这个，然后告诉我：var letterName = $('textarea[name="letterName"]')[1].val(); - Julien Le Coupanec

很遗憾：TypeError: 'undefined'不是一个函数。也许是因为我有多个文本区域？或者这是Meteor的问题？非常感谢您的帮助。 - user3475602

是的，请检查您的 Chrome 调试器，Bootstrap 会将 #popover-content 中的内容放入一个新的 div.popover 中（每次单击都会这样）。因此，每次单击 .newLetter 都会得到一个新的文本区域。 - Julien Le Coupanec

谢谢你的帮助。事情是这样的：我有多个按钮，应该显示一个带有文本区域的弹出窗口。然后，我想处理用户输入。你觉得用弹出窗口实现这个功能“可能”吗？ - user3475602

当然可以。只需要找到一个方法来定位文本区域并获取其值。请参考此链接（http://getbootstrap.com/javascript/#popovers-usage）和$().popover(options)。也许能够帮助您解决问题。 - Julien Le Coupanec