CODEWITHSUNDEEP
javascriptjqueryasp.net-mvctwitter-bootstrap
Casey Crookston
Casey Crookston

Reputation: 13945

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

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!

Upvotes: 0

Views: 714

Answers (1)

fdomn-m
fdomn-m

Reputation: 28611

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>

Upvotes: 1

Related Questions