Events running multiple times after adding new content to the DOM

Question

I have issue with my plugin, because I need a way to update if new elements are added to the DOM I added a update methods, if I start the plugin all goes well, everything works perfect, not issues, no error, but once I add a new elelemnt(div with class box) to the DOM things goes wrong, the update works, but the click events seem to fire multiple times now, so if I add a new element the event runs twice, if I add 2 elements to the DOM, the events runs 3 times....and so on. I am not that good at Js, so I am stuck at this, I have tried a lot but nothing seems to work.

Elements that are newly added work fine, but if I add some more new elements they will have the same issues.

I added below a small preview, as my plugin is custom an big I only posted the parts that have issues(made them easy to understand).

The update method is needed, new elements(.box) need to be updated(add new code to the .box)

the HTML code

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

inline script

  $('#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');
  });

the plugin

  ;(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

If you bind events more than once this problem will occur.

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

  });