動的に画像を読み込んでjQueryを呼び出さない

Question

おはよう、私は静的にHTMLに配置して（jQueryを使ってもJavaScriptはうまくいきます） '.click'イベントを実行すると画像があります。私のimgはidの 'imgId'のdivに配置されています。

<div id="imgId"> 
     <img src="Pictures/sign_here.jpg" class="overlays" id="imgSignHere" 
      style="left: 864px; top: 252px;" /> 
    </div> 

しかし、私はJavaScriptを使用して、動的にこのイメージを作成する場合：

var sigImage = document.createElement("img"); 
    sigImage.setAttribute('src', 'Pictures/image.jpg'); 
    sigImage.setAttribute('class', 'overlays'); 
    sigImage.style.left = "864px"; 
    sigImage.style.top = "252px"; 
    document.getElementById('imgId').appendChild(signHereImage); 

を、私はそれに.click、または任意のjQueryやJavaScriptのマウスクリックイベントを呼び出すことはできません。私は非常にシンプルなものを見落としている可能性が最も高いですが、もしあなたが私を助けることができたら、私は大いに感謝します。どうもありがとう。

Answer 1

私がテストしたところ、うまくいきました。また、document.getElementById('imgId').appendChild(sigImage);が間違っていました。

var sigImage = document.createElement("img"); 
 
sigImage.setAttribute('src', 'https://pbs.twimg.com/profile_images/839721704163155970/LI_TRk1z.jpg'); 
 
sigImage.setAttribute('class', 'overlays'); 
 
sigImage.style.left = "864px"; 
 
sigImage.style.top = "252px"; 
 
document.getElementById('imgId').appendChild(sigImage); 
 

 
sigImage.addEventListener("click", function() { 
 

 
\t alert("Hello"); 
 

 
});

<div id="imgId"></div>

Answer 2

jQuery's .on()メソッドを使用して、ページ上の要素のクリックハンドラを登録できます。 .on()を使用する利点は、DOMに追加するタイミングに関係なく、セレクタに一致するすべての要素にクリックハンドラをアタッチすることです。 jQueryのドキュメント（少しあなたのケースのために修正された）から

例：

function notify() { 
    alert("clicked"); 
} 

$("img").on("click", notify); 

Answer 3

私はあなたの問題を発見しました。 imgを動的に作成しているため、標準のクリックバインディングは機能しません。以下のようにjqueryを試すことができます。

$('#yourdivId').on("click", ".imgId", function(){ 
    alert("Works"); }); 

Answer 4

イベントリスナーは、あなたの#imgIdのdivに添付する必要があります。

var imgContainer = document.getElementById("imgId"); 
 
imgContainer.addEventListener("click",function(e){ 
 
alert("I was clicked."); 
 
},false); 
 

 
var sigImage = document.createElement("img"); 
 
sigImage.setAttribute('src', 'https://static.pexels.com/photos/382167/pexels-photo-382167.jpeg'); 
 
sigImage.setAttribute('class', 'overlays'); 
 
sigImage.style.left = "864px"; 
 
sigImage.style.top = "252px"; 
 
sigImage.style.width = "200px"; 
 
sigImage.style.height = "auto"; 
 
imgContainer.appendChild(sigImage);

<div id="imgId"></div>

NB：イメージはPexelsに自由ライブラリから来ています。

Answer 5

DOMに新しい要素を追加すると、共通イベントのリスナーは機能しません。あなたがしなければならないのは、.onメソッドを使うことです。このように：

$("#imgId").on("click", function() { 
    alert('it works!'); 
});