How to initialize a plugin from another javascript file

Question

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>

Kraang Prime · Accepted Answer · 2017-01-02 10:02:15Z

1

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>

edited Jan 2, 2017 at 10:02

answered Jan 2, 2017 at 7:53

Kraang Prime

10.6k11 gold badges66 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

jenny Over a year ago

The problem is I have multiple object instances and hence I get ScrollTest run multiple time. Is there a way to call ScrollTest directly or check for the instance brfore calling the Tree() again?

Kraang Prime Over a year ago

@jenny what is the intention ? If you want it to run only once, then put the <script>$(document).ready( ... ) ...</script> stuff only once. If you want that action to occur on every button and only on button click, then remove said script tag completely as it's not required. Or you could do something a bit more fancy (modifying above code slightly)

jenny Over a year ago

I do not want to run only once. I have need the plugin to be called once and when I click 'scorl' buttton I just want scroll function to be called. The problem I am facing is , in console : Initially I get console.log("start). When i click 'click me' button, I get console.log('clicked') once. But when I click 'Scroll button' and then clcik 'clcik me' button. I get console.log('clciked') twice. It think it is because the events get bind twice.

Kraang Prime Over a year ago

I have updated the runnable sample to run the code only once, but apply to all. As for the in scroll you are calling that method from inside the click() inside your plugin. If you want scroll to be separate you can make it a separate method.

jenny Over a year ago

But I can not assign it to click. As per my requirement, I want the plugin to be initialized on load as there are other functions in that. Also I want the page to execute scroll on load once . Then I make some changes to the page where I want just the scroll function to be executed again. is there a way to reinitialize the plugin ?

|

Collectives™ on Stack Overflow

How to initialize a plugin from another javascript file

My Code [ fiddle demo ]

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

My Code [ fiddle demo ]

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related