на изображении клик не работает jquery/js

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

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

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

Answer 4

написать его, как показано ниже

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