Move your in page jQuery to external javascripts

Move your in page jQuery to external javascripts

This is a sample html with inline javascripts. A very common question for newbie how to move the javascript to external file, below i show you 3 method i used to apply.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>external jquery demo</title> 
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script>
      $(document).ready(function() {

           var buttonHandler = function() {
                $( "p" ).html( "You clicked the button" ); 
           }

           $("button").on("click", buttonHandler);

      });
  </script>
</head>

<body>
   <button> Click me </button>

   <p> Click on the button above </p>
</body>
</html>

 

Create external javascript file

Option1:

Move the entire $(document).ready into external file

$(document).ready(function() {

      var buttonHandler = function() {
          $( "p" ).html( "You clicked the button" ); 
      }

      $("button").on("click", buttonHandler);			
});

 

Option2:

If your event are based on DOM onload event, you can use this short hand for onload $(function(){  } );. 

$(function() {
   var buttonHandler = function() {
	  $( "p" ).html( "You clicked the button" ); 
   };

   /* 
      optional, you can register at html
      when DOM ready
   */
   $("button").on("click", buttonHandler);
});

 

Option3:
Move partially, so you can reuse it.

(function($){
  buttonHandler = function() {
	$( "p" ).html( "You clicked the button" );
  };	
})(jQuery);

 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>external jquery demo</title> 
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="external.js"></script>
  <script>
	$(document).ready(function () {
		$("button").on("click", buttonHandler);	
	});
  </script>
</head>

<body>
   <button> Click me </button>

   <p> Click on the button above </p>
</body>
</html>

2 comments

  1. I ɑbsolutely love your site.. Excellent colors & theme.
    Dіd you develop this amazing site yourself? Pleaѕe reρly back as I’m
    hoping to creаte myy very own blog and want to know
    where ƴou got this from or what the theme is called.
    Thanks!

    Reply
    1. Thank you to visit my site. I bought this themes from themesforest. You can get this from this link.

      Reply

Write a Reply or Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.