Can not trigger any javascript events inside popover in bootstrap

Question

Ok, I've been dealing with this issue for a couple of days and I just found out that I can't trigger any events inside a bootstrap popover. I even tried to trigger an alert() and it does nothing.

I have a popover with a button in it. When you click the button the text on it change. Any help? Fiddle here. Thanks.

Answer 1

As Michael pointed out in his answer, the popover element does not exist in the HTML until the link is clicked. So the click handler can't attach to it until after the link is clicked. So you can either move the click handler into the popover call, or use the jquery on delegate, like this:

$('.location').on('click','.text-btn',function () {
    alert('What\'s going on!');
    //$('.text-btn').toggle();
});

See this work in the fiddle

What this does is the following: It attaches a click handler to the element with the location class. When anything inside this element gets clicked (such as the text-btn element), the event bubbles up and triggers this handler. However, the on handler listens only to events that are triggered by specific elements (in this case elements that have the text-btn class). Since the the handler is attached to the .location element and this element is non-dynamic, it will always be available.

Answer 2

The problem is that you are assigning an event listen on a node that does not exist yet. If you look at the HTML that is generated when you click on Fire popover the following HTML is generated:

<div class="popover-content">
     <button class="btn text-btn">Toggle me!</button>
     <button class="btn text-btn toggle-text">Un-Tobble me</button>
</div>

The problem is that this was generated after your listener code ran on the document - therefore there is no listener on your button.

Hopefully someone else can tell you how to add the listener as I can't figure it out.