Bootstrap submenu click event doesn't work with jQuery

Question

I have the following Bootstrap submenu structure:

<ul class="dropdown-menu">
    <li class="submenu-open">
        <a href="http://google.com"><span class="dropdown-sub-toggle"></span>Some Text</a>
        <ul class="collapse dropdown-submenu">
            <li> 
                <a href="http://google.com">Some Text</a>
            </li>
        </ul>
    </li>
</ul>

The menu is collapsing when I click on span tag - it's an arrow from the right. I need to prepend some text to span tag when it's clicked, but I can't select it with jQuery - $('.dropdown-sub-toggle').click(function({...})) doesn't work. How can I make it work?

This is probably due to the fact the span is inside the <a> tag, thus clicking on the span triggers the click on the link. Do you need to be able to follow the link also ? — Flipke
– Flipke, Commented Nov 3, 2014 at 9:57
The link works separately and span just collapses the menu. It all works, but I can't select it with jQuery. P.S. the first level menu with identical structure works fine with jQuery. — Alex
– Alex, Commented Nov 3, 2014 at 10:03
Do you have a demo page somewhere ? Might be easier to debug with full scripts. — Flipke
– Flipke, Commented Nov 3, 2014 at 10:05

Flipke · Accepted Answer · 2014-11-03 10:14:29Z

1

$(".submenu-open").on('click', function(e){
    e.preventDefault();
});

$(".dropdown-sub-toggle").on('click', function(e){
    $(this).prepend("Some Text");
});

This worked for me.

You could also add stopProgagation().

$(".dropdown-sub-toggle").on('click', function(e){
    e.stopPropagation();
    $(this).prepend("Some Text");
});

To prevent event bubbling.

Can't see any other reasons why this wouldn't work.

answered Nov 3, 2014 at 10:14

Flipke

9716 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Bootstrap submenu click event doesn't work with jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related