JQuery как лучше прописать события при написании плагина?

Question

[av_tyschenko]

Друзья, пишу плагин, столкнулся с проблемой. При событии change не адекватно реагирует. Как мне лучше прописывать события?

Данный пример ищет на сайте поля input['type=file'] с классом .square_upload, и заворачивает их в label. Дальше я хочу сделать событие при выборе файла. Но он у меня начинает срабатывать по несклько раз, если разместить 3 поля, то при выборе первого, будет 3 прохода, 2рого - 2 и тд...

(function( $ ){

  var $this = $(this);

  var methods = {

    init : function( options ) {

      return this.each(function(){

        $this        = $(this);
        $this.width  = $this.data('width');
        $this.height = $this.data('height');

        methods._build();
        methods._initEvents();

      });
    },

    _build : function(){

        $this.wrap( '<label class="unit_upload" />' );

        $this.unit_upload = $this.parent();

        $this.unit_upload.css({
            'width'  : $this.width,
            'height' : $this.height
        });
        $this.parent().append( '<div class="preview" />' );

    },

    _initEvents : function(){



        $(document).on('change', '.unit_upload input', function(event) {

            console.log('1';)

        });

    }

  };

  $.fn.square_upload = function(method){
    if (methods[method]) {
      return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if (typeof method === 'object' || ! method) {
      return methods.init.apply(this, arguments);
    } else {
      return methods.init.apply(this);
    }
  };

  $(".square_upload").square_upload();

})( jQuery );

Answer 1

[Филипп Фастер]

Так Вы в _initEvents() всем элементам селектора ".unit_upload input" задаете функцию. Сразу всем. А перед этим Вы еще по каждому проходитесь (при этом при проходе каждого он всем снова добавляет функцию) и получается он подключает событие снова. Получается, что в конце концов он добавляет по {3} функции на каждый из элементов.

Просто определитесь где вы проходитесь по всем элементам. В init достаточно прописать methods._initEvents(); без each. Он и так всем элементам подключит эту функцию. Или просто в _initEvents() ловите текущий элемент и суйте его в селектор on() вместо ".unit_upload input";

Comments

[av_tyschenko]

Вытащил из return this.each(function(){
Так он его видеть совсем перестал...

[Филипп Фастер]

Можно в init в each делать так: methods._initEvents();
А вот так в функции _initEvents
_initEvents : function(nowElement){
$(document).on('change', nowElement, function(event) {
console.log('1';)
});
}

А вообще я не понимаю зачем вы делаете так: $(document).on("change",selector,...
Можно же $(selector).on("change",function(event){...})
А в Вашем варианте nowElement.on('change', function(event) {...

[Филипп Фастер]

Ой, init в each делать так: methods._initEvents(this);

[av_tyschenko]

не работает...( Он даже консоль лог не видит, если она за пределами return this.each

[Филипп Фастер]

Так в each его обратно поместите, т.к. без each там еще фич добавить нужно. Должно получиться:
return this.each(function(){

$this = $(this);
$this.width = $this.data('width');
$this.height = $this.data('height');

methods._build();
methods._initEvents(this);

});

А в _initEvents то, что я писал выше.

[Филипп Фастер]

Кстати, у Вас проблема с console.log(...). У Вас написано console.log('1';), знак ';' не там

[av_tyschenko]

лог, это не проблема) а проблема то что все ровно работает не так как надо) Все ровно по обходу делает 3 раза... Может быть вы знаете инструкцию для написания плагинов на основе методов, или какой то стандарт? Ибо я гуглю, но все примеры слишком простые...

[Филипп Фастер]

Сейчас, были где-то...

[Филипп Фастер]

Найду - отправлю. Давно уже интересовался этим. Я на, так сказать, JS-ООП пишу давно, проблем не возникало. У Вас ошибка в самом js. Вы где-то проходитесь несколько раз. Вообще.. Не будет ошибки, если Вы сделаете так (в _initEvents): $(document).off().on('change', '.unit_upload input', function(event) {

Но это дурной тон, Вы просто скрываете ошибку, а не исправляете ее. Процесс переприсваивания функции все равно будет происходить...

Найду инструкцию - скину. История почистилась в браузере, а так быстро найти не удалось.

[av_tyschenko]

Проблему решил простым $this.on('change', function(event) {
Но за ссылку на грамотное написание плагинов, я все ровно был благодарен)