Bootstrap 弹出框，.click 没有捕捉到弹出框内的按钮

Question

首先，这是问题的代码演示：jsfiddle.net

我在使用一个弹出框，它的内容是HTML，里面有一个class为"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>

- Tim Habersack

Answer 1

.click() 只能用于页面加载时已经存在的元素，你需要使用 on() 方法。

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

- Stefan

---

我没有考虑到它不是在加载时创建的这个事实。谢谢，这是一个完美的答案！ - Tim Habersack

@stefan - 我有类似的情况，想向您询问更多信息。我已经有了$(document).ready(function () {});，并且我正在其中使用上面的代码进行单击事件，它完美地工作，但只是为了澄清概念：我们有$(document).ready(function () {});，为什么我们仍然需要将$(document)与单击事件连接起来？这样使用公平吗？ - DharaPPatel

Answer 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的相同代码。

顺便说一句，这是您的示例。

- Jonny Sooter

---

虽然@stefan的答案基本上是正确的，但这个答案更完整。这个实现更有效率。你的脚本不需要遍历整个“document”来查找按钮。 - Phil Andrews

Answer 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准备就绪时，你的按钮尚未创建。为了解决这个问题，在弹出窗口每次出现时，你需要处理已创建按钮上的事件。

- Markus Fantone

Answer 4

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

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

- sra