Question

我正在使用jQuery编写一些javascript，以便在我的asp.net页面中点击img时触发。

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：IMG HTML元素，ID属性为 "zoomIn" ，javascript function 名称为 zoomIn 。

尝试重命名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/

onclick事件不会在firefox或chrome中触发

3 个答案: