javascript - jQuery 单击事件不会为 div 触发

Question

我不明白为什么这不起作用。我有一个表，其中包含一个 div 和标题中的图像。当我单击此按钮时，我想通过 jQuery 函数触发单击事件。以下是 HTML 的屏幕截图:

这是 jQuery 函数:

$(document).ready(function () {
    console.log('ready');

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

我相信在事件绑定(bind)之前元素就已经在 DOM 中了。 HTML 的尾部如下所示(它是包含上面 jQuery 语言的“external_link_dialog.js”文件):

        <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>

我的控制台输出显示 ready页面加载后立即。但是，当我单击<div>时， 什么都没发生。我没有看到任何错误，没有控制台输出，当然也没有警报。谁能看到我做错了什么吗？我已经研究了好几个小时了，但没有什么想法。谢谢!

Answer 1

我猜您是在 document.ready 之后附加 div 。 如果您要动态添加 add_external_link div，则应在附加该 div 之后附加 .on("click 函数after>.

如果div不是动态添加的，那么尝试添加超时

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