web-dev-qa-db-ja.com

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の下にあります

jqueryhtmlselector
12
Stefan

イベントハンドラが登録されたとき、imgはDOMにありません。 $('body').on('click','img',function(){alert('it works');})を使用できます

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

変更せずにコードを機能させたい場合は、.Imageではなく、クラス名ではなく属性名を入力してください

3
Mostafa Anssary

Document.ready（）でコードを実行するのではなく、代わりにwindow.load（）関数を使用する必要があります。

$(window).load(function() {
    $("img").click(function(){
        alert("it works!");
     });
});
  • document.ready（）はjQueryイベントで、DOMの準備ができたときに実行されます。すべての要素が見つかりました/使用されますが、必ずしもすべてのコンテンツではありません。
  • window.load（）は、画像などが読み込まれると、後で（または最悪/失敗の場合に同時に）起動するため、たとえば画像の寸法を使用している場合は、代わりにこれを使用することがよくあります。
2
Biosopher

これを試してください。ajaxリクエストからの画像でも動作します。

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