javascript - 将事件处理程序附加到 Twitter Bootstrap 弹出窗口中的按钮

Question

我正在使用 twitter bootstrap popovers，

在弹出窗口中我添加一个按钮，

我需要将一个click处理程序附加到按钮上，但弹出窗口的工作方式是每次显示它时都会删除并重新创建该元素，而不是仅仅显示/隐藏它，从而删除与所述按钮关联的任何事件处理程序。

我正在创建几个弹出窗口，所有弹出窗口都有自己的按钮版本，因此仅将一个类应用于弹出窗口是行不通的(除非我为每个弹出窗口生成不同的类:/)，该按钮可能有也可能没有它有自己的 ID，因此无法申请 ID。

如何将事件处理程序应用于 twitter bootstrap popover 内容中的某些内容？

Answer 1

我遇到了同样的问题，就我而言，$(body).on('click') 解决方法不起作用，因为应用程序有很多点击按钮。

我做了以下操作。这样，我们可以将委托(delegate)事件的范围限制为弹出框元素的父元素。

$('a.foo').popover({
    html: true,
    title: 'Hello',
    placement: 'bottom',
    content: '<button id="close-me">Close Me!</button>'
}).parent().delegate('button#close-me', 'click', function() {
    console.log('World!');
});

JS fiddle :http://jsfiddle.net/dashk/5Yz7z/

附注我在应用程序的 Backbone.View 中使用了这项技术。这是 Fiddle 中的代码片段，如果您也在 Backbone.js 中使用它...: http://jsfiddle.net/dashk/PA6wY/

已编辑在 Bootstrap 2.3 中，您可以指定弹出窗口将添加到的目标容器。现在，您还可以监听专门针对容器的事件，而不是执行 .parent() 定位器...这可以使监听器更加具体(想象一下创建一个仅用于包含弹出窗口的 DIV。)