29

首先，解决问题：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>
4

4 回答 4

56

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

$(document).on("click", ".click_me", function() {
    alert('it works!');
});
于 2013-07-16T16:42:21.207 回答
3

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

<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.

顺便说一句，这是你的小提琴。

于 2013-07-16T16:43:39.980 回答
2

您应该尝试以下方法：

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 准备好时，您的按钮尚未创建，这样做，每次弹出框上升时，您都将处理您创建的按钮上的事件。

于 2013-07-16T16:59:10.253 回答
0

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

$('#myPopover').on('hidden.bs.popover', function () {
  // bind your button click event here
})
于 2017-02-06T17:41:47.863 回答