在Firefox或Chrome中，onclick事件不会触发

Question

当我在asp.net页面中单击img时，我正在使用jQuery编码一些JavaScript以触发。

img声明如下：

<img id="zoomIn" alt="Zoom In" src="/Images/Plus.png" onclick="zoomIn();" />

.js文件功能是：

function zoomIn() {
    zoomLevel += 1;
    showMapImage();
}

function showMapImage() {
    //show the location map
    var img_url = "http://maps.google.com/maps/api/staticmap?center=" + $asp("lblCoordinates").html() + "&size=200x150&sensor=false&zoom=" + zoomLevel + "&markers=color:green%7C" + $asp("lblCoordinates").html();
    $("#imgMap").attr('src', img_url);
}

function $asp(serverID) {
    return $("[id$='" + serverID + "']");
}

这在IE中可以正常工作，但在Chrome或Firefox中却不能，这使我认为我无法发现某个地方存在一些简单的错误

Answer 1

由于您已经使用过jQuery，因此您可以使用

$('#zoomIn').click(zoomIn);

Answer 2

您的页面包含两个具有相同名称\\ id的元素：ID属性为"zoomIn" IMG HTML元素和名称为zoomIn javascript function 。

尝试重命名function zoomIn或IMG#zoomIn 。

Answer 3

将其包装在锚定标签内并相应设置样式。

<a href="#" onclick="zoomIn();">
    <img id="zoomIn" alt="Zoom In" src="/Images/Plus.png" />
</a>

http://jsfiddle.net/H57Vg/5/