Question

早上好，我有一个图片，如果我静态地将它放在HTML中并运行（使用jQuery，但JavaScript也很好）a＆＃39; .click＆＃39;事件，它工作正常。我的img被放置在一个id为“imgId＆＃39;”的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);不正确。

＆＃13;

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() {

	alert("Hello");

});

＆＃13;

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

＆＃13;

Answer 2

您可以使用jQuery's .on()方法为网页上的元素注册点击处理程序。使用.on()的优点是它会将click处理程序附加到与您的选择器匹配的所有元素，无论它们何时添加到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>

注意：图片来自Pexels上的免费图书馆。

Answer 5

当您向DOM添加新元素时，公共事件的侦听器将无法工作。你要做的是使用.on方法。像这样：

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

动态加载不调用jQuery的图像

5 个答案: