0

プラグインに問題があります。DOMに新しい要素が追加された場合に更新する方法が必要なため、更新メソッドを追加しました。プラグインを起動すると、すべてが正常に機能し、問題はなく、エラーは発生しません。 DOMに新しい要素（クラスボックス付きのdiv）を追加すると、問題が発生し、更新は機能しますが、クリックイベントが複数回発生するように見えるため、新しい要素を追加すると、イベントが2回実行され、2つの要素を追加するとDOM、イベントは3回実行されます...など。私はJsがあまり得意ではないので、これに固執しています。たくさん試しましたが、何もうまくいかないようです。

新しく追加された要素は正常に機能しますが、さらにいくつかの新しい要素を追加すると、同じ問題が発生します。

プラグインはカスタムであるため、小さなプレビューの下に追加しました。問題のある部分のみを投稿しました（わかりやすくしました）。

更新メソッドが必要です。新しい要素（.box）を更新する必要があります（.boxに新しいコードを追加します）

HTMLコード

 <div id="container">

  <div class="box">
      <a href="#" class="link1">link 1</a>
      <a href="#" class="link1">link 2</a>
      <div>content goes here...</div>
  </div>

  <div class="box">
      <a href="#" class="link1">link 1</a>
      <a href="#" class="link1">link 2</a>
      <div>content goes here...</div>
  </div>

  <div class="box">
      <a href="#" class="link1">link 1</a>
      <a href="#" class="link1">link 2</a>
      <div>content goes here...</div>
  </div>
</div>

インラインスクリプト

  $('#container').myplugin01();

  $('#somelink').click(function(e){
      $('#container').append('<div class="box"><a href="#" class="link1">link 1</a><a href="#" class="link1">link 2</a><div>content goes here...</div></div>'); 

      $('#container').myplugin01('update');
  });

プラグイン

  ;(function($, window, document, undefined){

      //"use strict"; // jshint ;_;

      var pluginName = 'myplugin01';

      var Plugin = function(element, options){
          this.init(element, options);
      };

      Plugin.prototype = {

          init: function(element, options){

              this.elm     = $(element);
              this.options = $.extend({}, $.fn[pluginName].options, options);


              // example 1: animation
              $('#container').children('.box').on("click", ".link1", function(e){
                  $(this).parent().children('div').animate({height: 'toggle'},400)
              });

              // example 2: wrapping
              $('#container').children('.box').on("click", ".link2", function(e){
                  $(this).parent().wrap('<div class="wrapped"></div>')
              });


              this.update();
          },

          update: function(){
              $('#container').children('.box').addClass('someclass');

              // more code here...
          }
      };

      $.fn[pluginName] = function(option) {
          var options = typeof option == "object" && option;

          return this.each(function() {
              var $this = $(this);
              var data  = new Plugin($this, options);

              if(!$.data($this, pluginName)){           
                  $.data($this, pluginName, data);
              }

              if(typeof option == 'string'){
                  data[option]();
              }

          });
      };

      /**
      * Default settings(dont change).
      * You can globally override these options
      * by using $.fn.pluginName.key = 'value';
      **/
      $.fn[pluginName].options = {
          name: 'world' 
      };


  })(jQuery, window, document);
4

1 に答える 1

2

イベントを複数回バインドすると、この問題が発生します。

 // inline script
  $('#container').myplugin01();// binding first time

  $('#somelink').click(function(e){
      $('#container').append('<div class="box"><a href="#" class="link1">link 1</a><a href="#" class="link1">link 2</a><div>content goes here...</div></div>'); 

      $('#container').myplugin01('update');// binding second time
   // We suggest you to unbind here and rebind it.

  });
于 2012-12-10T18:21:10.883 に答える