.NET MVC Bootstrap: shown.bs.dropdown Not Working

Question

I'm trying to tap into the 'shown.bs.dropdown' event on the ul with the id of 'navul'. Can't seem to get it working. Here's my script:

<script>
    $('#navul').on('shown.bs.dropdown', function () {
        alert('hello');
    })
</script>

And here's my HTML:

<div class="navbar navbar-inverse">
    <div class="container">
        <ul id="navul" class="nav navbar-nav">
            <li role="presentation" class="dropdown">
                <a data-toggle="dropdown" href="#"><img src="/Content/images/IconsNav/nav_appts.png" style="padding: 0px 5px 3px 0px;">Appointments<span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li>@Html.ActionLink("YourAppointments", "YourAppointments", "Appointments")</li>
                    <li>@Html.ActionLink("Schedule Appointment", "ScheduleAppointment", "Appointments")</li>
                </ul>
            </li>
        </ul>
    </div>
</div>

I never get the alert. What am I doing wrong? I'm working off this:

http://getbootstrap.com/javascript/#dropdowns

Thanks!

I'm not 100% up with twitter-bootstrap - try one of the higher element IDs, eg ".navbar" — fdomn-m
– fdomn-m, Commented Jun 15, 2015 at 15:07
Tried that. I added an id to the first div, and changed the javascript to match. No luck. Then the second div. Still no luck. — Casey Crookston
– Casey Crookston, Commented Jun 15, 2015 at 15:14

fdomn-m · Accepted Answer · 2015-06-15 15:25:07Z

1

The .on event will only register the event if the element already exists when .on is called, if your script is too soon, it won't register, try loading in the jquery document ready, ie:

<script>
    $(function() {
        $('.navbar').on('shown.bs.dropdown', function () {
            alert('hello');
        })
    });
</script>

answered Jun 15, 2015 at 15:25

fdomn-m

28.8k8 gold badges39 silver badges70 bronze badges

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

3 Comments

Casey Crookston Over a year ago

Hmm. Seems like a solid idea, but still not working. I found this working example. I'll see if I can replicate it, and then modify it to meet my needs. bootply.com/114783

fdomn-m Over a year ago

I went to the getbootstrap page, opened console (F12), entered $(".navbar").on("shown.bs.dropdown", function() { alert("x"); }) then went to the "within a navbar" example on the page and clicked on Dropdown[v] - it gave the alert.

Casey Crookston Over a year ago

yeah, there seems to be something else wrong with my page. I can't get any JavaScript to work. Gota spend some time in Fiddler seeing what's wrong.

Collectives™ on Stack Overflow

.NET MVC Bootstrap: shown.bs.dropdown Not Working

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related