jqueryプラグインイベントは最後の項目にのみ適用されます

Question

jqueryのプラグインを作成しています（私の最初の1つ、ごめんなさい;））、イベントを除いてすべて正常に動作します。イベントは常に、最後の要素に適用されます。 1つの要素だけがうまくいくが、2つ以上の要素のイベントがクラッシュする場合。

私は同様の調査をしてきましたが、私の解決策は見つけられません。

コードが上である：

http://jsbin.com/itajow/edit#javascript,html

とデモはちょうど問題を見てフィルタリングしたり、改ページを経由

http://jsbin.com/itajow

です。

ありがとうございます！

Answer 1

このメソッドで使用される変数は、さまざまな方法で使用されました - メソッド内でローカル変数（メソッド内でvar self = this）が作成され、メソッドの外部で変数として使用された他の場所（var ）。これが意図的なものかどうかはわかりませんが、変数localを最後の要素だけに起こっているページングの問題を修正しました。

更新されたコードがhttp://jsbin.com/itajow/11/edit

注である：宣言addNav:function(self)はselfオブジェクトにかかりますが、それは、コード内のパラメータとし、なしの両方と呼ばれていますので、関数の最初の行はself = self || thisをすることによって、これを修正。

編集
リストフィルタリングを機能させるために、以下のように、イベントバインディングを書き換えることがあります。

self.$elem.find(".beautableFilter").on("keyup", function() { 
    var input = $(this).val(); //this == the input element 
    self.addFiltrado(input); 
}); 

とaddFilterado方法はparmeterとしてinputを取るのではなく、それ自体を見つける必要があります。 。 自己の$ elemは未定義です：

これは本当に問題のほとんどを解決し

// JavaScript Document 
// requiere pubsub!! 
// requiere contains insensitive!! 
jQuery.expr[":"].contains=function(a,i,m) { 
    return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0; 
}; 
(function(a) { var b=a({});a.subscribe=function() { b.on.apply(b,arguments); },a.unsubscribe=function() { b.off.apply(b,arguments); },a.publish=function() { b.trigger.apply(b,arguments); } })(jQuery); 

if(typeof Object.create!=='function') { 
    Object.create=function(obj) { 
     function F() { } 
     F.prototype=obj; 
     return new F(); 
    }; 
} 

(function($,window,document,undefined) { 
    var Beautable={ 
     init: function(options,elem) { 
      var self=this; 

      self.elem=elem; 
      self.$elem=$(elem); 

      self.$elem.addClass("beautable"); 

      self.ncols=self.$elem.find("th").size(); 
      self.nrows=self.$elem.find("tr").size()-1; 

      if(options===undefined) { 
       options={}; 
      } 
      self.options=$.extend({},$.fn.beautable.options,options); 

      self.subscribeTo(); 
      self.addFooter(); 
      if(self.options.filtro) { self.addHeader(); } 
      self.addData(); 

      if(self.options.multicheck) { self.multicheckFn(); } 
      if(self.options.showTotal) { self.showTotal(); } 
      if(self.options.maxRows>0) { self.addNav(); } 

      self.bindEvents(); 

      //self.hideRows(3,4); 
     }, 
     subscribeTo: function() { 
      //$.subscribe('twitter.getTweets', Twitter.cleanTweets); 
      //$.subscribe('twitter.gotTweets', Twitter.attachTemplate); 
     }, 

     bindEvents: function() { 
      var self=this; 
      if(self.options.multicheck) { 
       self.$checkPadre.on("click",function() { 
        self.multicheckEvent(); 
       }); 
      } 
      if(self.options.maxRows>0&&self.nrows>self.options.maxRows) { 
       self.$elem.find(".beautableButton").on("click",function() { 
        self.buttonClicked($(this)); 
       }); 
      } 
      if(self.options.filtro) { 
       self.$elem.find(".beautableFilter").on("keyup", function() { 
       var input = $(this).val(); //this == the input element 
       self.addFiltrado(input); 
       }); 
      } 
     }, 
     multicheckFn: function() { 
      var self=this; 
      self.$checks=self.$elem.find("input[type='checkbox']"); 
      self.$checkPadre=self.$checks.eq(0); 

      self.$checkPadre.attr("checked",false); 
     }, 
     multicheckEvent: function() { 
      var self=this; 
      self.$checks.attr("checked",self.$checkPadre.is(':checked')); 
     }, 

     showTotal: function() { 
      var self=this; 
      self.$elem.find("tfoot tr td").append('<div class="floatedl">Total: '+self.nrows+' filas</div>'); 
     }, 
     addFooter: function() { 
      var self=this; 
      self.$elem.find("tbody").after('<tfoot><tr><td colspan="'+self.ncols+'">&nbsp;</td></tr></tfoot>'); 
     }, 
     addHeader: function() { 
      var self=this; 
      self.$elem.find("thead").prepend('<tr><th colspan="'+self.ncols+'"><div class="floatedr"><input type="text" placeholder="Filtrar..." class="beautableFilter"></div></th></tr></tfoot>'); 
     }, 

     addData: function() { 
      var self=this; 
      nrowsdata=0; 
      $.each(self.$elem.find("tbody tr"),function() { 
       $(this).data("nrow",++nrowsdata); 
      }); 
     }, 
     buttonClicked: function($bt) { 
      var self=this; 
      page=$bt.data("page"); 
      maxp=self.options.maxRows*page; 
      minp=maxp-self.options.maxRows+1; 
      self.hideRows(minp,maxp); 
      self.$elem.find(".beautableButton").removeClass("selected"); 
      $bt.addClass("selected"); 
     }, 
     hideRows: function(minR,maxR) { 
      var self=this; 
      $.each(self.$elem.find("tbody tr"),function() { 
       if($(this).data("nrow")<minR||$(this).data("nrow")>maxR) { $(this).hide(); } else { $(this).show(); } 
      }); 
     }, 
     addNav: function(self) { 
      self=self||this; 
      if(self.nrows>self.options.maxRows) { 
       self.npages=Math.ceil(self.nrows/self.options.maxRows); 
       self.$elem.find(".navi").remove(); 
       buttons=""; 
       for(i=1;i<=self.npages;i++) { 
        buttons+="<div class='beautableButton' data-page="+i+">"+i+"</div>"; 
       } 
       self.$elem.find("tfoot td").append('<div class="floatedr navi">'+buttons+'</div>'); 
       self.buttonClicked($(".beautableButton").eq(0)); 
      } 
     }, 
     addFiltrado: function(input) { 
      var self=this; 
      clearTimeout(self.timer); 
      if(input.length>0) { 
       self.timer=setTimeout(function() { 
        self.filtrar(input); 
       },100); 
       self.$elem.find("tfoot .navi").hide(); 
      } else { 
       self.$elem.find("tfoot .navi").show(); 
       self.filtrar(input); 
       self.addNav(self); 
      } 
     }, 
     filtrar: function(busqueda) { 
      self=this; 
      self.$elem.find("tbody tr").hide(); 
      self.$elem.find('tbody tr td:contains("'+busqueda+'")').filter(function() { $(this).parent().show(); }); 

     } 

    }; 

    $.fn.beautable=function(options) { 
     return this.each(function() { 

      var beautable=Object.create(Beautable); 
      beautable.init(options,this); 
     }); 
    }; 

    $.fn.beautable.options={ 
     multicheck: true, 
     showTotal: false, 
     sumatorio: "", 
     paginated: false, 
     maxRows: 0, 
     filtro: false 
    }; 

})(jQuery,window,document);