Question

I have html element with id:

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

when I place script to to html, I can get message after click:

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

But when I put script to external file MyScript.js:

alert("Script is there");

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

I get message “Script is there” but never “function invoked”
I don’t know what is the reason. Any ideas? Thank You in advance.

Answer 1

You external javascript file would be loading before the element of DOM become available using document.ready. Also make sure the jQuery file is inlcluded before external javascript file.

$(document).ready(function(){

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

});