How To Catch Bootstrap Navbar Dropdown Event?

I'm using the basic Twitter Bootstrap navbar for my menu, and I now want to show notifications in a dropdown inspired by the system here on Stackoverflow. To accomplish this I want

Solution 1:

Why it does work in the jsfiddle?

This is because you load the javascript code using onload. See the onload selection in the dropdown left.

Why doesn't it work on my website?

Because you place the code in the head and you don't wait till the dom is ready.

How can I fix this?

Check if the dom is ready. Can be done like so:

$(document).ready(function() {
    $('#jajaja').on('show.bs.dropdown', function () {
        alert('Come on lets show the dropdown!!');
    });
});

Or in short:

$(function() {
    $('#jajaja').on('show.bs.dropdown', function () {
        alert('Come on lets show the dropdown!!');
    });
});

Other good practice is placing all javascript just before closing the body </body>.