jQuery onclick 上的 div答案

【问题标题】：Jquery onclick on divjQuery onclick 上的 div
【发布时间】：2011-08-12 00:06:43
【问题描述】：

我有一个简单的问题。以下代码适用于所有标签：

$('*').click(function(e) {  
    alert(1);
});

但是，当我为 id 为“内容”的 div 尝试此代码时：

$('#content').click(function(e) {  
    alert(1);
});

我做错了什么？

【问题讨论】：

我不知道，你做错了什么（如错误/意外）？

标签： jquery

【解决方案1】：

确保它在文档就绪标签内或者，尝试使用.live

$(document).ready(function(){

    $('#content').live('click', function(e) {  
        alert(1);
    });
});

例子：

$(document).ready(function() {
    $('#content').click(function(e) {  
      alert(1);
    });
});

#content {
    padding: 20px;
    background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="content">Hello world</div>

从 jQuery 1.7 开始，不推荐使用 .live() 方法。使用 .on() 附加事件处理程序。

$('#content').on( "click", function() {
    alert(1);
});

【讨论】：

【解决方案2】：

什么都没有。

$('#content').click(function(e) {  
    alert(1);
});

将绑定到 ID 设置为content 的现有 HTML 元素，并在点击时显示一个消息框。

在使用该代码之前确保 #content 存在
ID 是唯一的
检查您的 Javascript 控制台是否有任何错误或问题

【讨论】：

【解决方案3】：

js

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>


<script type="text/javascript">

$(document).ready(function(){
    $("#div1").on('click', function(){
            console.log("click!!!");
        });
});

</script>

html

<div id="div1">div!</div>

【讨论】：

【解决方案4】：

附加此事件时是否可以不创建id="content" 的div？你可以试试 live() jquery 方法。

否则可能有多个 div 具有相同的 id 或者您只是拼写错误，它会发生......

【讨论】：

【解决方案5】：

将代码包装在$(document).ready() 方法或$() 中。

$(function(){

$('#content').click(function(e) {  
    alert(1);
});

});

【讨论】：

当你想找到任何元素或将事件处理程序附加到 dom 元素时，请确保在 $() 或 $(document).ready() 方法中进行。 $("*") 之所以有效，是因为它将事件附加到文档并使用事件冒泡机制来执行事件处理程序。

【解决方案6】：

看看这个fiddle ...你做得对。确保 id 是内容，并检查是否有其他元素具有相同的 id。如果有多个具有相同 id 的元素，它将绑定到第一个。这可能就是你没有看到它的原因。

【讨论】：

谢谢，我忘了提的另一件事是任何其他标签都不起作用（body、html 等）