Bootstrap 弹出框，.click 没有在弹出框内捕获按钮答案

【问题标题】：Bootstrap Popover, .click not catching button inside popoverBootstrap 弹出框，.click 没有在弹出框内捕获按钮
【发布时间】：2013-07-14 23:19:30
【问题描述】：

首先，解决问题：jsfiddle.net

我正在使用一个弹出框，它的内容是 html，一个带有“click_me”类的按钮。我有 jquery 来监听“click_me”的点击，它应该会发出警报。然而，事实并非如此。我错过了什么吗？

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：

<button class="btn btn-primary demo_button">Click here</button>

<div id="popover_template">
    <button class="btn click_me">Make Alert</button>
</div>

【问题讨论】：

标签： jquery html twitter-bootstrap popover

【解决方案1】：

.click() 仅适用于加载时需要使用 on() 的元素

$(document).on("click", ".click_me", function() {
    alert('it works!');
});

【讨论】：

我没想到它不是在加载时创建的。谢谢，这是一个完美的答案！
@stefan - 我有类似的情况，想问你更多。我有 $(document).ready(function () {});已经，我正在使用上面的代码来处理其中的点击事件，它工作得很好，但只是为了澄清这个概念：我们有 $(document).ready(function () {});以及为什么我们仍然需要在点击事件中附加 $(document) ？使用这种方式公平吗？

【解决方案2】：

您的问题是您将事件附加到尚未准备好接收该事件的元素。您应该将事件附加到父元素，然后您可以过滤该元素。这样，当您的可点击元素出现时并不重要，它会起作用。

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

此外，在执行此操作时，请勿将其附加到树上太高的父级。您想将其附加到最近的可能父元素。我们不需要像document 这样的点击事件，因为最好具体说明哪些元素会得到这个事件。将它附加到document 将意味着任何具有click_me 类的元素都可以点击并响应相同的代码。如果你想在不同的按钮中有不同的功能，你不能，因为它们都响应document所附的相同代码。

顺便说一句，这是你的fiddle。

【讨论】：

虽然@stefan 的回答大体上是正确的。这个答案更完整。这种实现更有效。您的脚本无需遍历整个 document 即可找到该按钮。

【解决方案3】：

您应该尝试以下方法：

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

当 DOM 准备好时，您的按钮尚未创建，这样做，每次弹出框上升时，您将处理已创建按钮上的事件。

【讨论】：

【解决方案4】：

使用： show.bs.popover - 调用 show 实例方法时立即触发此事件。

$('#myPopover').on('hidden.bs.popover', function () {
  // bind your button click event here
})

【讨论】：