无法在 JQuery 中使用 select 元素并执行简单事件

Question

我无法使用 JQuery 点击功能在 "canvas" 上创建简单的点击事件。

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

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

也尝试了 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;

}

下面是 divs 的图像：

这真是令人沮丧，因为这是我无法调用的基本功能。

编辑：

我加了一个https://jsfiddle.net/5mtt2khu/

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

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

已更新

Remove or change the 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>

Answer 2

<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 更改为输入类型，或者 button.It 在我为 div 指定颜色并单击 it.So 时起作用，但不知道单击哪里活动没有进行。

Answer 3

您的 jQuery 代码实际上可以正常工作。这里的问题可能是因为 canvas 没有定义高度和宽度，所以它太小而无法实际点击它。像下面的代码片段一样给 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>

Answer 4

我想你正在寻找这样的东西：

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

希望对您有所帮助:)

Answer 5

您的代码似乎有效。

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

JQuery 没有正确安装
您之前有一个 javascript 错误，因此从未执行过
您的 html 是在您加载事件处理程序后动态添加的
您在某处有另一个 div 具有相同的 ID

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

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

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

});

如果你有多个 "canvas" id，你可以这样做：

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

无法在 JQuery 中使用 select 元素并执行简单事件

Cannot select element in JQuery and execute simple event

html

javascript

css

jquery

jquery-selectors