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ファイルが読み込まれます。また、外部javascriptファイルの前にファイルが含まれていることを確認してください。DOMdocument.readyjQuery

$(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