jquery - 元素单击上的 jQuery 函数仅适用于外部文件

Question

我有带有 id 的 html 元素：

<img id = "ShowOrHideImage" src="~/Images/show_expander.png"/>

当我将脚本放置到 html 时，单击后我可以收到消息：

<script>
    $("#ShowOrHideImage").click(function () {
        alert("function invoked");
    });
</script>

但是当我将脚本放到外部文件 MyScript.js 中时：

alert("Script is there");

$("#ShowOrHideImage").click(function () {
    alert("function invoked");
});

我收到消息“脚本在那里”但从未“调用函数”我不知道是什么原因。有任何想法吗？先感谢您。

score 3 · Accepted Answer

您external的 javascript 文件将在DOM使用document.ready. 还要确保jQuery在外部 javascript 文件之前包含该文件。

$(document).ready(function(){

  $("#ShowOrHideImage").click(function () {
      alert("function invoked");
  });

});

score 1 · Accepted Answer

尝试这个：

alert("Script is there");

$(function () {
  $("#ShowOrHideImage").click(function () {
    alert("function invoked");
  });
});

$(function() {只是的缩写$(document).ready(function () {。

此外，它嵌入到您的文档中的原因是因为您将它放在<body>标签中，我猜想是在所有内容（或没有）后面的某个地方。如果你将它嵌入到<head>标签中，它仍然不起作用，需要$(function () {.

2 回答 2