Как инициализировать плагин из другого файла javascript

у меня есть следующая скрипка. При нажатии кнопки "прокрутка" можно ли вызвать функцию scrollTest внутри плагина? Прямо сейчас я снова вызываю весь тест (), и, следовательно, он создает новый тестовый объект каждый раз, когда я нажимаю кнопку прокрутки.

Мой Код [ скрипка демо ]

    (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>
9
frontend javascript jquery

1 ответов

вам нужно обернуть использование его внутри $(document).ready(); блок, чтобы убедиться, что скрипт загружен перед началом его использования.

если вы хотите иметь свой код только run onClick для элементов с классом test_button2 вы можете использовать :

// 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();
   });
});

.. и заменить ..

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

.. с..

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

см. код ниже для исправления в действии:

(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>
1