26

我正在使用 twitter 引导弹出框，

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

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

我正在使用自己的按钮版本创建几个弹出框，因此仅将一个类应用于弹出框是行不通的（除非我为每个弹出框生成不同的类：/），按钮可能有也可能没有它自己的 ID ，因此无法申请 ID。

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

4

7 回答 7

36

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

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

$('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 小提琴：http: //jsfiddle.net/dashk/5Yz7z/

PS 我Backbone.View在我的应用程序中使用了这种技术。这是 Fiddle 中的代码片段，以防您也使用它Backbone.js...：http: //jsfiddle.net/dashk/PA6wY/

已编辑在 Bootstrap 2.3 中，您可以指定将添加弹出框的目标容器。现在，除了使用 .parent() 定位器，您还可以专门监听容器的事件...这可以使监听器更加具体（想象创建一个仅存在以包含弹出框的 DIV。）

于 2013-02-08T19:15:32.493 回答
27

这应该这样做。这将处理在具有 .popover 类的元素内创建的任何现有和未来的按钮元素：

$('body').on('click', '.popover button', function () {
    // code here
});
于 2012-11-03T02:11:45.077 回答
11

对我有用的非常简单的解决方案是：

// suppose that popover is defined in HTML
$('a.foo').popover(); 

// when popover's content is shown
$('a.foo').on('shown.bs.popover', function() {
    // set what happens when user clicks on the button
    $("#my-button").on('click', function(){
        alert("clicked!!!");
    });
});

// when popover's content is hidden
$('a.foo').on('hidden.bs.popover', function(){
    // clear listeners
    $("#my-button").off('click');
});

为什么会这样：基本上popover的内容在popover打开之前没有监听器。

当显示 popover 时，bootstrap 会触发它的 event shown.bs.popover。我们可以在这个事件上附加一个事件处理程序来$(a.foo)使用 jQueryon方法。因此，当显示弹出框时，将调用处理程序（回调）函数。在此回调中，我们可以将事件处理程序附加到弹出框的内容 - 例如：当用户单击弹出框内的此按钮时会发生什么。

关闭弹出框后，最好删除所有附加到弹出框内容的处理程序。这是通过处理程序完成的，它使用 jQuery方法hidden.bs.popover删除处理程序。.off这可以防止弹出框内的事件处理程序在再次打开弹出框时被调用两次（甚至更多）......

于 2015-03-06T14:12:25.067 回答
10

只是为了稍微更新DashK的非常好的答案：从 jQuery 1.7 开始，.delegate() 已被 .on() 取代（请参阅此处）。

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

在此处查看 jsfiddle：http: //jsfiddle.net/smingers/nCKxs/2/

在将 .on() 方法链接到 $('a.foo'); 时，我也遇到了一些问题。如果您遇到此类问题，请尝试将其添加到文档、正文或 html 中，例如：

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

$('body').on('click', 'button#close-me', function() {
    console.log('World!');
});
于 2014-02-26T18:53:44.877 回答
1 
$('.btn-popover').parent().delegate('button#close-me','click', function(){
  alert('Hello');
});

如果在静态 html 中设置了数据属性，则上述方法可以正常工作。谢谢 ：）

于 2013-11-29T15:31:54.430 回答
1

如果您在弹出框的内容中添加更复杂的结构，例如外部组件，您可能会遇到麻烦。对于这种情况，这应该可以解决问题。

var content = $('<button>Bingo?</button>');
content.on('click', function() {
    alert('Bingo!')
});

$('a.foo').popover({
    html: true,
    content: content
}).on('hidden.bs.popover', function() {
    content.detach(); # this will remove content nicely before the popover removes it
});
于 2014-08-16T21:15:01.613 回答
0

试试这个

var content = function() {
    var button = $($.parseHTML("<button id='foo'>bar</button>"));
    button.on('click', '#foo', function() {
        console.log('you clicked me!');
    } );
    return button;
};

$( '#new_link' ).popover({
    "html": true,
    "content": content,
});
于 2013-07-03T20:42:52.203 回答