JQuery $( "img" ). Click (function() селектор не работает

По какой-то причине, когда я нажимаю на изображение с помощью этого кода JQuery, экран предупреждения не отображается.

HTML:

<div id="example1">
 <div>
  <div>
   <div class="user">
    <img class="Image" src="images/image.jpg">
   </div>
  </div>
 </div>
</div>

JavaScript:

$(document).ready(function(){
 $("img").click(function(){
  alert("it works!");
 });
});

Я не могу понять, почему это не работает. Я включил библиотеку jquery, а тег <script> находится под div

ОТВЕТЫ

Ответ 1

img не находится в DOM, когда зарегистрирован ваш обработчик событий. вы можете использовать $('body').on('click','img',function(){alert('it works');})

Ответ 2

 $(document).ready(function(){
    $(".Image").click(function(){
    alert("it works!");
   });
  });

Если вы хотите, чтобы ваш код работал без изменения, просто поставьте .Image not img имя класса не присваивает имя

Ответ 3

Вместо того, чтобы запускать свой код в document.ready(), вместо этого вы должны использовать функцию window.load().

$(window).load(function() {
    $("img").click(function(){
        alert("it works!");
     });
});
  • document.ready() - событие jQuery, оно выполняется, когда DOM готов, например. все элементы должны быть найдены/использованы, но не обязательно все содержание.
  • window.load() срабатывает позже (или в то же время в худшие/неудачные случаи), когда изображения и такие загружаются, поэтому, если вы например, используя размеры изображения, вы часто хотите использовать это вместо этого.

Ответ 4

По какой-то причине, когда я нажимаю на изображение с этим кодом jquery, экран предупреждения не отображается.

Я использую плагин jquery для получения изображений из твиттера у людей, которые использовали #Image, это прекрасно работает и выставляет html то, что выглядит так.

Если я попробую селектор с телом вместо изображения, появится предупреждение, но я не могу заставить его работать с селектором изображений, почему он не отвечает на это?

i включил jquery следующим образом:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

im 100% уверен, что html правильно проверен как минимум 10 раз.

единственная ошибка, которую дает консоль: "Attr.nodeValue" устарел. Вместо этого используйте "значение". но я не думаю, что это должно остановить работу jquery выше над телом когда я попробовал script внизу под div, он тоже не работал.

HTML:

<div id="example1">
 <div>
  <div>
   <div class="user">
    <img class="Image" src="images/image.jpg">
   </div>
  </div>
 </div>
</div>

JavaScript:

$(document).ready(function(){
 $("img").click(function(){
  alert("it works!");
 });
});

Ответ 5

Попробуйте это, это работает с изображениями, поступающими из запроса ajax тоже.

$(document).on('click','img',function(){
alert("Click event works!");
});