How to write a simple custom js plugin

Question

I want to write a custom js plugin which needs to get initiated if there is a data attribute included in my HTML:

<input value="98" data-my-plugin="number">

If data-my-plugin is included, I want to initiate my js or jquery plugin automatically.

Answer 1

You can use .ready() , attribute selector "[data-my-plugin]" or "[data-my-plugin=number]"

 (function($) { $.fn.extend({ "myPlugin": function() { // do stuff return this.val() } }); }(jQuery)); $(document).ready(function() { console.log($("[data-my-plugin]").myPlugin()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <input value="98" data-my-plugin="number">