Bootstrap Popover, .click not catching button inside popover

问题

First off, a fiddle of the problem: 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?

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>

回答1:

.click() will only work for elements that are present on load you need to use on()

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

回答2:

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 document because it's a good idea to be specific of which elements will get this event. Attaching it to document will 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.

Btw here's your fiddle.

回答3:

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.

回答4:

Use : show.bs.popover - This event fires immediately when the show instance method is called.

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

来源：https://stackoverflow.com/questions/17682267/bootstrap-popover-click-not-catching-button-inside-popover

标签

jquery

html

twitter-bootstrap

popover