將新內容添加到DOM後多次運行的事件

Question

我的插件有問題，因爲我需要一種方法來更新新元素是否添加到DOM中我添加了一個更新方法， 如果我啓動插件一切都好那麼，一切工作完美，沒有問題，沒有錯誤，但一旦我添加一個新的Elelemnt（與類框的div） 的事情出錯了，更新的作品，但點擊事件似乎現在多次啓動，所以如果我添加一個新元素，事件運行兩次，如果我將2個元素添加到DOM，事件運行3次....等等。我對Js並不擅長，所以我被困在這裏，我嘗試了很多，但似乎沒有任何工作。

新添加的元素工作正常，但如果我添加一些更多的新元素，他們將有相同的問題。

我在一個小的預覽下面添加了一個小插件，因爲我的插件是自定義的，我只發佈了有問題的部分（使它們易於理解）。

是需要的更新的方法，新的元素（■）需要更新（新的代碼添加到.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); 

Answer 1

如果您不止一次綁定事件，則會發生此問題。

// 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. 

    });