Question

我是Javascript的新手，我很想使用html标签在外部.js文件中的图像上执行onClick事件

<script type="text/javascript" src="embed.js">

“embed.js”中的代码如下

var image1=new Image();
image1.src="img.gif"
document.write('<IMG src='+image1.src+'>');


$(document).ready( function()
{
 $(image1).click( function()
{
    alert("Hello World");
    });
});

正如您所看到的，我想在有人点击图片时显示警告，但我发布的代码不起作用。你可以帮帮我吗？谢谢！：）

@JD它的HTML代码是

<html>
<head>
    <title></title>

</head>

<body>
<script src="embed.js"></script>
</body>


</html>

Answer 1

您附加onclick的图片和放在页面上的图片不一样。

说明：您传递给document.write的字符串由浏览器解析，以创建新图像元素（虽然具有相同的{{1>} src 1}}）image1是一个不同的图像实例，只在内存中（不在页面上），但它有事件监听器。

要修复，请更换

document.write('<IMG src='+image1.src+'>');

与

document.body.appendChild(image1);

现在你只处理一个图像，它被放在页面和事件监听器上。

Answer 2

所有答案都是正确的

但你可以插入＆＃34; image1＆＃34;对象直接在DOM中。

这样的事情：

$(document).ready( function(){
    // Take care with the scope of image1

    var image1 = $("<img/>").attr("src","img.gif").appendTo("parentElementInDOMselector");

    image1.click( function(){
        alert("Hello World");
    });

});

您可以使用appendTo，preppendTo或html（）之类的函数;更换（）;等...

Answer 3

您的选择已关闭，请尝试：

$("document").ready( function()
{
 $("#image1").click( function()
{
    alert("Hello World");
    });
});

并在图片标记中添加ID

<img id='image1' ...

JS小提琴http://jsfiddle.net/YS95J/

＆＃34;的onClick＆＃34;在外部.js文件上

3 个答案: