jQuery Bootstrap Popover，.click 不捕捉弹出框内的按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17682267/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Popover, .click not catching button inside popover
提问by Tim Habersack
First off, a fiddle of the problem: jsfiddle.net
首先，问题的一个小提琴：jsfiddle.net
I am using a popover, and it's content is html, a button with class "click_me". I have jquery to listen for a click on "click_me" and it should throw an alert. However, it doesn't. Am I missing something?
我正在使用一个弹出框，它的内容是 html，一个带有“click_me”类的按钮。我有 jquery 来监听“click_me”上的点击，它应该发出警报。然而，事实并非如此。我错过了什么吗？
JS:
JS：
jQuery(document).ready(function($) {
$('.demo_button').click(function () {
$(this).popover({
html: true,
trigger: 'manual',
placement: 'right',
content: function () {
var $buttons = $('#popover_template').html();
return $buttons;
}
}).popover('toggle');
});
$('.click_me').click(function() {
alert('it works!');
});
});
HTML:
HTML：
<button class="btn btn-primary demo_button">Click here</button>
<div id="popover_template">
<button class="btn click_me">Make Alert</button>
</div>
回答by Stefan
.click() will only work for elements that are present on load you need to use on()
.click() 仅适用于加载时需要使用的元素 on()
$(document).on("click", ".click_me", function() {
alert('it works!');
});
回答by Jonny Sooter
Your problem is you're attaching an event to an element that isn't ready to receive that event. You should attach the event to a parent element, then you can filter for the element. This way it doesn't matter when your clickable element shows up, it will work.
您的问题是您将事件附加到尚未准备好接收该事件的元素上。您应该将事件附加到父元素，然后您可以过滤该元素。这样当你的可点击元素出现时并不重要，它会起作用。
<div class="container"><br />
<button class="btn btn-primary demo_button">Click here</button>
<div id="popover_template">
<button class="btn click_me">Make Alert</button>
</div>
</div>
$('.container').on("click", ".click_me", function() {
alert('it works!');
});
Also when doing this, don't attach it to a parent that's too high up the tree. You want to attach it to the nearest possible parent element. We don't need to have a click event on something like documentbecause it's a good idea to be specific of which elements will get this event. Attaching it to documentwill mean that any element, that has the class of click_me, will be click able and respond to the same code. If you want to have different functionality in different buttons, you can't, because they're all responding to the same code attached to document.
此外，在执行此操作时，不要将其附加到树上太高的父级。您想将其附加到最近的可能父元素。我们不需要在类似的东西上有一个点击事件，document因为具体说明哪些元素将获得这个事件是个好主意。将其附加到document将意味着具有 类的任何元素click_me都可以单击并响应相同的代码。如果您想在不同的按钮中具有不同的功能，则不能，因为它们都响应附加到document.
Btw here's your fiddle.
顺便说一句，这是你的小提琴。
回答by Markus Fantone
You should try the following:
您应该尝试以下操作：
jQuery(document).ready(function($) {
$('.demo_button').click(function () {
$(this).popover({
html: true,
trigger: 'manual',
placement: 'right',
content: function () {
var $buttons = $('#popover_template').html();
return $buttons;
}
}).popover('toggle');
$('.click_me').off('click').on('click', function() {
alert('it works!');
});
});
});
When the DOM is ready, you're button it's not yet created, doing this, everytime the popover rises you will handle the event on your created button.
当 DOM 准备好时，您的按钮尚未创建，这样做，每次弹出窗口上升时，您都将处理创建的按钮上的事件。
回答by sra
Use : show.bs.popover - This event fires immediately when the show instance method is called.
使用： show.bs.popover - 当调用 show 实例方法时，该事件立即触发。
$('#myPopover').on('hidden.bs.popover', function () {
// bind your button click event here
})
