Bootstrap Popover, .click not catching button inside popover

Question

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>

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

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

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