CODEWITHSUNDEEP
jquerytwitter-bootstraptwitter-bootstrap-3
Vikas Kottari
Vikas Kottari

Reputation: 495

Manually fire bootstrap navbar menu click event

I have a requirement, where i have to manually fire click event of bootstrap(v3.3.5) navbar menu. I have tried click event of li as well as the tag inside li, but they dint work. below is my code:

<div id="navbar" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
        <li role="presentation"><a href="index.html"><span class="menuicon home"></span><span class="menutittle">Home</span></a></li>
        <li id="li_contact"><a href="contact.html"><span class="menuicon contact"></span><span class="menutittle">Contact</span></a></li>
        <li id="li_watsNew"><a href="wats-new.html"><span class="menuicon fingerprint"></span><span class="menutittle">What's New</span></a></li>

        /// etc. . . .

Jquery code:

$('#li_watsNew').click(); //doesn't fire

OR

$('#li_watsNew a').click(); //doesn't fire

Please help me on this.

Upvotes: 5

Views: 6823

Answers (1)

Blaž Zupančič
Blaž Zupančič

Reputation: 2356

This line of code will take the user to the location that your <a> is pointing to:

window.location = $('#li_watsNew a').attr('href');

This one will also trigger onclick events:

$('#li_watsNew a')[0].click();

The problem with your code is, that it's using the jQuery's click event. In this case, you need the native one. The $()[0] of a jQuery object gives you it's DOM version (of the first query match). You could also use jQuery's $().get(0), it's completely equivalent to $()[0]

Upvotes: 4

Related Questions