Question

首先，问题的一个小问题：jsfiddle.net

我使用的是popover，它的内容是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>

Answer 1

.click（）仅适用于您需要在（）

上使用的加载元素

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

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

这是你的fiddle。

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准备就绪时，你按钮它还没有被创建，这样做，每次弹出窗口上升时你将在你创建的按钮上处理事件。

Answer 4

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

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

Bootstrap Popover，.click没有抓住popover内的按钮

4 个答案: