external js file / unobtrusive js not working but there is no error in console

Question

I have an external JavaScript file, the inline JavaScript works fine but when I separate it (unobtrusive), it doesn't work and doesn't show an error either.

I am using Visual Studio Web Developer Express 2010. Please see my code.

HTML

    <form id="form1" runat="server">
    <div>
     <br />
     <button id="btnSave" type="button" style="width:300px; height:200px;"> SAVE           </button>
    </div>
  </form>

ASPX head

    <script src="<%= ResolveUrl("~/javascript_01.js") %>" type="text/javascript"></script>

External JS

        /// <reference path="~/Scripts/libframeworks/jQuery/jQuery-2.1.4.min.js" />

(function () {
    $('#btnSave').mouseover().css("background-color", "Blue");
    $('#btnSave').mouseleave().css('background-color', 'gray');
});

Answer 1

Your code never run, you need to call the function using (), so it becomes an IIFE, and the code inside it will be executed.

Remember to add jquery, before your script:

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>

Your External JS:

(function ($) {
    $('#btnSave').mouseover().css("background-color", "Blue");
    $('#btnSave').mouseleave().css('background-color', 'gray');
})(jQuery); //You need to call the function :)