CODEWITHSUNDEEP
jquerytwitter-bootstrapnavsubmenu
Alex
Alex

Reputation: 21

Bootstrap submenu click event doesn't work with jQuery

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?

Upvotes: 1

Views: 1032

Answers (1)

Flipke
Flipke

Reputation: 971

$(".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.

Upvotes: 1

Related Questions