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

标签 javascript jquery twitter-bootstrap event-handling popover

我正在使用 twitter bootstrap popovers,

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

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

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

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

最佳答案

我遇到了同样的问题,就我而言,$(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。)

关于javascript - 将事件处理程序附加到 Twitter Bootstrap 弹出窗口中的按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13205103/

相关文章:

javascript - Flowplayer 实例的 $f 未定义

javascript - Twitter Bootstrap - 动态更新 Affix Data-Offset 属性

c# - 在重定向时显示动画 gif 文件直到 asp 页面加载?

twitter-bootstrap - Bootstrap 工具提示不适用于 React.js

css - 在 Bootstrap 3 导航栏链接上保留事件类

css - 如何在 Bootstrap 的下拉列表前面添加图片?

javascript - 获取动态添加的单选按钮的值 (JQuery)

javascript - 你不能转换 CjwKEAjwiYG9BRCkgK-G45S323oSJABnykKAhI-

javascript - 图像加载后启动 JavaScript 动画

javascript - 多日期选择器错误?