jQuery点击事件没有为div激活

Question

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

这是jQuery函数：

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

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

我相信在绑定事件之前元素在DOM中。 HTML的尾部看起来像这样（它是＆＃39; external_link_dialog.js＆＃39;文件，其中包含上面的jQuery语言）：

        <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

根据您的CSS，div实际上可能比您尝试点击的图片小。

尝试将目标设置为以下内容：

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

Answer 2

我猜你是在文件后面追加div.ready。 如果您动态添加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);
});

Answer 3

尝试委托给文档或最接近的静态元素。

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