无法在 JQuery 中选择元素并执行简单事件答案

【问题标题】：Cannot select element in JQuery and execute simple event无法在 JQuery 中选择元素并执行简单事件
【发布时间】：2025-12-08 08:15:02
【问题描述】：

我无法使用 JQuery 点击功能在“画布”上制作简单的点击事件。

$(document).ready(function(){
    alert("test");

    $("#canvas").click(function(){
        alert("canvas");
    });
    $(".middle").click(function(){
        alert("middle");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle">middle
        <div id="canvas">canvas</div>
</div>

“测试”消息出现，但上述功能不起作用。 div "middle" 的其他兄弟姐妹（我没有包括，因为我试图将它们删除以进行测试，但它仍然发生）可以执行事件，但只有这个 div 和 inside 不能执行单个事件。

还尝试了console.log($("#canvas"))，它在下面获取了一些数据。

[div#canvas]

这里是完整的html：

<!DOCTYPE html>
<html>
    <head>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <link href="/demo/resources/themes/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
        <link href="/demo/resources/themes/custom/css/custom.css" rel="stylesheet" />
<script src="/demo/resources/themes/bootstrap/js/bootstrap.min.js"></script>
        <script src="/Sketchy-demo/resources/themes/custom/js/custom.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>App Page</title>
    </head>
    <body>

        <div class="middle">
            <div id="canvas"></div>
        </div>

    </body>
</html>

custom.css

.middle{
    z-index: -1;
    position: relative;
    display: block;
    height: 88%;
    width:100%;
    top: 0px;
    left:0px;
    margin: 0px;
    background-color: transparent;
}

#canvas{
    display: block;
    position: relative;
    height: 88%;
    width: 80%;
    margin: auto;
    top: 6%;
    background-color: white;
    border: 5px dashed black;
    border-radius: 10px;

}

下面是div的图片：

这真的很令人沮丧，因为这是一个我无法调用的基本函数。

编辑：

我添加了https://jsfiddle.net/5mtt2khu/

如有任何问题，请告诉我。谢谢！

【问题讨论】：

当我运行你的代码时，我可以得到警报画布和中间都很好。
是的，这就是重点。很容易看出它必须工作，但它不在我的身上
你能创建一个minimal reproducible example吗？
嗨@ChrisG，这是我得到的所有信息。谢谢
是这样的：.middle { z-index: -1 } 它将<div> 移动到body 后面。知道我是怎么发现的吗？我右键单击画布并选择“检查元素”，然后我被带到<body>。

标签： javascript jquery html css jquery-selectors

【解决方案1】：

使用event.target元素。并匹配条件

Updated js Fiddle

$(document).ready(function() {
 alert("test");
  
  $(".middle").click(function(e) { 
if($(e.target).attr('id')== 'canvas'){
alert('canvas')
//do stuff for canvas
}
else{
 alert("middle");
//do stuff for middle
}
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle">middle
  <div id="canvas">canvas</div>
</div>

更新

删除或更改z-index

$(document).ready(function() {
  alert("test");
  $(".middle").click(function(e) {
    if ($(e.target).attr('id') == 'canvas') {
      alert('canvas')
      //do stuff for canvas
    } else {
      alert("middle");
      //do stuff for middle
    }
  });
});

.middle {
 z-index:0;/*remove or change > -1*/
  position: relative;
  display: block;
  height: 88%;
  width: 100%;
  top: 0px;
  left: 0px;
  margin: 0px;
  background-color: red;
}

#canvas {
  display: block;
  position: relative;
  height: 88%;
  width: 80%;
  margin: auto;
  top: 6%;
  background-color: white;
  border: 5px dashed black;
  border-radius: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="middle">
  <div id="canvas"></div>
</div>

【讨论】：

仍然没有输出。
i 添加了console.log() 检查浏览器的F12 模式。或将 console.log 更改为 alert()。查看我的更新答案
仍然没有输出。 (e) 不返回任何东西。
但是它在 sn-p 上工作。检查 jquery 链接或尝试使用 event 而不是 e 和 event.target 而不是 e.target
@bpunzalan 我已经告诉过要更改 z-index:0 。请参阅固定小提琴 jsfiddle.net/5mtt2khu/1 。并检查我的更新答案

【解决方案2】：

您的代码似乎有效。

所以问题一定来自其他方面。这里有一些可能性：

JQuery 安装不正确
您之前遇到过 javascript 错误，因此永远不会执行此操作
加载事件处理程序后会动态添加您的 html
您在某处有另一个具有相同 id 的 div

如果你的html是动态添加的，我建议你这样做

$(document).ready ( function () {
    $(document).on ("click", "#canvas", function () {
        alert("canvas");
    });

    $(document).on ("click", "#middle", function () {
        alert("middle");
    });

});

如果您有多个“画布”ID，您可以执行以下操作：

$("[id=canvas]").click(function () {
    alert("canvas");
});

【讨论】：

【解决方案3】：

我认为您正在寻找这样的东西：

$(document).ready(function(){
  alert("test");

  $("#canvas").click(function(e){
      alert("canvas");
      e.stopPropagation();
  });
  $(".middle").click(function(){
      alert("middle");
  });
});

.middle {
  width: 200px;
  height: 200px;
  background: red;
}

#canvas {
  width: 100px;
  height: 100px;
  background: green;
  margin: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle">
  <div id="canvas"></div>
</div>

希望对你有帮助:)

【讨论】：

【解决方案4】：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" media="screen" />
</head>

<body>
    <div class="middle">
        <div  id="canvas" style="width:10px;height:10px;background:red;"></div>
</div>
</body>
<script>
$(document).ready(function(){
    alert("test");

    $("#canvas").click(function(){
        alert("canvas");
    });
    $(".middle").click(function(){
        alert("middle");
    });
});
</script>

尝试将 div 更改为输入类型或按钮。当我为 div 指定颜色并单击它时它可以工作。所以，不知道在哪里单击事件不起作用。

【讨论】：

【解决方案5】：

您的 jQuery 代码实际上运行良好。这里的问题可能是因为画布没有定义高度和宽度，所以它太小而不能真正点击它。像下面的代码 sn-p 给 div 设置一个高度和宽度，你会看到 jQuery 被正确执行了。

$(document).ready(function(){
    alert("test");

    $("#canvas").click(function(){
        alert("canvas");
    });
    $(".middle").click(function(){
        alert("middle");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle" style="border: 1px solid black; height: 50px; width: 100px;">
        <div id="canvas" style="border: 1px solid red; height: 15px; width: 30px;"></div>
</div>

【讨论】：