jQuery 单击事件不会为 div 触发

Question

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

这是 jQuery 函数：

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

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

我相信元素在绑定事件之前就在 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函数。

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

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