将事件处理程序附加到twitter bootstrap popover中的按钮

Question

我正在使用twitter bootstrap popovers,

在popover我添加一个按钮,

I need to attach a click handler to the button, but the way popover works is each time it shows it removes and re-creates the element, instead of just showing/hiding it, hence removing any event handlers I have associated with said button.

I am creating several popovers all with their own version of the button, so just applying a class to the popover won't work (unless I generate a different class for each one :/), the button may or may not have it's own ID, so cannot apply an ID.

How can I apply a event handler to something in the contents of the twitter bootstrap popover?

Answer 1

我有同样的问题,在我的情况下,$(body).on('click')解决方法将无法工作,因为该应用程序有批量点击按钮.

我改为做了以下.这样,我们可以将delegate事件的范围限制为popover元素的父级.

$('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()定位器,还可以监听事件专门容器......这可以使更具体的听众(想象一下创建只存在于含有酥料饼核实.)

Answer 2

这应该做到这一点.这将处理使用.popover类在元素内创建的任何现有和将来的按钮元素:

$('body').on('click', '.popover button', function () {
    // code here
});

Answer 3

只是稍微更新DashK的非常好的答案:.delegate()已经被.on()从jQuery 1.7中取代(见这里).

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

Answer 4

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

// 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之前没有监听器.

当弹出窗口显示时,bootstrap将触发其事件shown.bs.popover.我们可以在此事件上附加事件处理程序以$(a.foo)使用jQuery on方法.因此,当显示popover时,将调用处理程序(回调)函数.在此回调中,我们可以将事件处理程序附加到弹出窗口的内容中 - 例如:当用户单击弹出框内的此按钮时会发生什么.

关闭popover后,最好删除所有附加的处理程序到popover的内容.这是通过hidden.bs.popoverhandler 完成的,它使用jQuery .off方法删除处理程序.当弹出窗口再次打开时,这可以防止弹出窗口中的事件处理程序被调用两次(和更多)...