0

我的插件有问题，因为如果将新元素添加到 DOM，我需要一种更新方法 我添加了更新方法，如果我启动插件一切顺利，一切正常，没有问题，没有错误，但是一旦我向 DOM 添加一个新的 elelemnt（带类框的 div） 事情出错了，更新有效，但点击事件现在似乎触发了多次，所以如果我添加一个新元素，事件运行两次，如果我添加 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 回答