javascript - 将新内容添加到 DOM 后事件多次运行

Question

我的插件有问题，因为我需要一种方法来更新是否将新元素添加到 DOM 我添加了更新方法，如果我启动插件一切顺利，一切都很完美，没有问题，没有错误，但是一旦我添加了一个新的 elelemnt(div with class box)DOM 出现问题，更新有效，但是单击事件现在似乎会触发多次，所以如果我添加一个新元素，该事件就会运行两次，如果我向 DOM 添加 2 个元素，则事件运行 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);

Answer 1

如果多次绑定(bind)事件，就会出现此问题。

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

  });