jQuery Click事件未触发div

Question

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!

Answer 1

Depending on your CSS, the div may actually be smaller than the image you're trying to click on.

Try setting your target to the following:

$('#add_external_link img').on('click', function(){
    alert('clicked');
});

Answer 2

I guess that you are appending the div after the document.ready . If you are adding that add_external_link div dynamically, you should attach the .on("click function after appending that div .

If the div is not added dynamically, then try adding a timeout

$(document).ready(function () {
    console.log('ready');
    setTimeout(function(){
      $(document).on('click','#add_external_link',function(){
          alert('clicked');
      });
   },1000);
});

Answer 3

Try delegating to document or the closest static element.

$(document).on('click','#add_external_link',function(){
    alert('clicked');
});