Popover中的级联下拉菜单

Question

I have a problem with implementing dropdown menus within a popover. I have looked at the bootstrap documentations and have tried everything from messing with the data toggle classes to try to get it to work, but nothing has happened.

In the first link, I have a cascading dropdown menu that works after clicking the link. LINK1

But in this link, I tried to put the same content as the code in link1 into a popover, and it lost it's capability to cascade. LINK2

I have looked into how to solve this, either by implementing manual click handlers or using the dropdown toggle, but have had no luck. To be more specific, I am not sure if I need to apply the same classes to the other sub-dropdowns, as I do to this one:

<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Click Here <span class="caret"></span></a>

Thank you in advance.

Answer 1

The problem is that the popover will create a new div in the DOM with the popover content, so in you js you have assigned the click event to an element that is never used. If you inspect the code you can see there are two "click here" anchor. To solve your problem you have to assign the event click using a different form. I create a new jsfiddle for you http://jsfiddle.net/nB4U6/1016/ To assign an event to element that will create in the future you have to use this form

$(staticAncestors).on(eventName, dynamicChild, function() {});

In your case I have changed this

$(".dropdown-menu > li > a.trigger").on("click", function(e) {});

with this

$('body').on("click",".dropdown-menu > li > a.trigger",function(e){});

The event will be bound to the body which already exists.