CODEWITHSUNDEEP
javascriptjqueryfrontend
jenny
jenny

Reputation: 277

How to initialize a plugin from another javascript file

I have the following fiddle. On click of button 'scroll', is it possible to call the scrollTest function inside the plugin? Right now I am calling the whole test() again and hence it is creating a new test object each time I click on scroll button.

My Code [ fiddle demo ]

    (function ($, win, doc) {
    'use strict';

    $.fn.test = Plugin;
    $.fn.test.Constructor = Test;

    function Plugin() {
        return this.each(function () {
            new Test(this);
        });
    }

    // TREE CLASS DEFINITION
    // =====================
    function Test(el) {
         var publ = this,
            priv = {};
        console.log("start");
        $('.test_button').click(function(){
            console.log("clicked");
            publ.scrollTest
        })

         publ.scrollTest = function () {
            console.log("in scrolltest");
        };
        publ.bindEvents= function () {
            console.log("in bind");
        };
        publ.fileter= function () {
            console.log("in filter");
        };
    }
    }(jQuery, this, this.document));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <h2>Hello</h2>
    <button class="test_button">Click me</button>
    <button class="test_button2" onclick="$('h2').test()">scroll</button>
    </body>
    <script>
	$('h2').test();
    </script>

Upvotes: 9

Views: 2864

Answers (1)

Kraang Prime
Kraang Prime

Reputation: 10479

You need to wrap the use of it inside a $(document).ready(); block to ensure the script has loaded before starting to use it.

If you wish to have your code only run onClick for elements with the class test_button2 you can use :

// include this only ONCE on your page.
$(document).ready(function() {
   $(this).test(true); // sends the flag to initialize the click() event once
   $('.test_button2').click(function(){
       $(this).test(); // action on every .test_button2 click();
   });
});

.. and replace ..

<button class="test_button2" onclick="$('h2').test()">scroll</button>

.. with ..

<button class="test_button2">scroll</button>

See the code below for the fix in action :

(function ($, win, doc) {
    'use strict';

    $.fn.test = Plugin;

    var publ, priv;

    function Plugin(initialize) {
        if(initialize === true) {
           console.log("start");
           $('.test_button').click(function(){
              console.log("clicked");
           });
        }
        console.log("in scrolltest");
    }

    }(jQuery, this, this.document));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <h2>Hello</h2>
    <button class="test_button">Click me</button>
    
    <!-- onClick is handled by jQuery's .click() method -->
    <button class="test_button2">scroll</button>
</body>
<script>
   // this code should only be placed once on your page.
  
   var $test;
  
   $(document).ready(function() {
      $test = $(this).test(true);
      $('.test_button2').click(function(){
         $(this).test();
      });
   });
</script>

Upvotes: 1

Related Questions