Question

我的html页面上有一个图像，我试图在点击图像时弹出一个警告框。我不明白为什么我的js不起作用。

这是我的HTML

<div id="canvas">
  <div id="cinematic-overlay"></div>
     <img src="img/characters/RodgerRiddle.png" id="rodger "alt="" width="60px" height="40px">
</div>

这是我的JS

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

Answer 1

标记中有space个字符，在使用id选择器选择元素时，不考虑空格，不会选择目标元素。

从HTML markup

中删除空格

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="canvas">
  <div id="cinematic-overlay"></div>
  <img src="img/characters/RodgerRiddle.png" id="rodger" alt="" width="60px" height="40px">
</div>

Answer 2

我的猜测是，这是由“电影叠加”造成的，可能会重叠图像，使其无法点击

要检查这一点，您可以将cursor:pointer添加到图像中，看看当鼠标放在图像上时它是否会发生变化

Answer 3

＆＃13;

$(document).ready(function(){
  $('#rodger').click(function(){
    alert('Hi!');
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="canvas">
  <div id="cinematic-overlay"></div>
  <img src="img/characters/RodgerRiddle.png" id="rodger" alt="" width="60px" height="40px">
</div>

＆＃13;

Answer 4

写如下

$(document).ready(function(){
$("#rodger").click(function(){
    alert("#rodger was clicked.");
 });
});

在图像上点击不工作jquery / js

4 个答案: