I don't understand why this isn't working. I have a table that includes a div and an image in the header. When I click on this, I want to fire the click event via a jQuery function. Here is a screenshot of the HTML:

And here is the jQuery function:

$(document).ready(function () {

    console.log('ready');



    $('#add_external_link').on('click',function(){

        alert('clicked');

    });

});

I believe that the element is in the DOM before the event is bound. The tail of the HTML looks like this (it's the 'external_link_dialog.js' file that contains the jQuery language from above):

        <script src=//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js></script>

        <script src=//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js></script>

        <script src=js/jquery.dlmenu.js></script>

        <script src=js/external_link_dialog.js></script>



    </body>

</html>

My console output shows ready as soon as the page is loaded. However, when I click that <div>, nothing happens. I see no errors, no console output, and of course no alert. Can anyone see what I am doing wrong? I've been at this for hours, and am out of ideas. Thank you!