Почему этот код jquery создает много копий «X-button»?

Question

Я не могу найти проблему. Почему этот код делает много копий кнопки «X», когда я закрываю красный слой и когда я снова нажимаю первую кнопку?

Я думал, что init работал как правильный конструктор, который запускается только один раз, верно?

Вот jsfiddle, иллюстрирующий проблему:

http://jsfiddle.net/yoniGeek/mWghr/

Спасибо за ваше время!

Y/

HTML-:

<div class="Main"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Phasellus non nisl mauris. Phasellus eget viverra mi. 
     Curabitur elementum tristique nibh, et faucibus eros 
     fermentum ut. Pellentesque non nisi augue. 
     Nulla facilisis ultrices malesuada. Sed bibendum lacus 
     sed lorem auctor rutrum. 
     iam semper justo id diam 
    </p> 
    <p id="last_child" > Lorem ipsum dolor 
     sit amet, consectetur adipiscing elit. 
     Phasellus non nisl mauris. Phasellus eget viverra mi. 
     Curabitut interdum velit ultricies. 
    </p> 
    <div id="layer_on" ></div> 
</div> 

JQuery-код:

(function(){ 

    $('html').addClass('js'); 

    //var red_layer; 
    var red_layer = { 
     red_box: $('#layer_on'), 

     init: function() { 
      $('<button></button>', { 
       text: 'push me' 
      }).insertAfter('.Main #last_child').on('click', this.show); 
     }, 

     show: function() { 
      red_layer.close.call(red_layer.red_box); 
      red_layer.red_box.show(); 
     }, 

     close: function() { 
      var $this = $(this); 
      $('<span class="close">X</span>').prependTo(this).on('click', function() { 
       $this.hide(); 
      }); 
     } 
     //anonymous function 

    }; // red_layer object ends 

    red_layer.init(); //We call it back (the function) 

})(); 

Answer 1

Почему бы вам не добавить кнопку закрытия в методе init? Вам нужно только добавить кнопку один раз. Как бы то ни было, вы добавляете кнопку X каждый раз, когда вы показываете окно. Каждый раз, когда вы нажимаете push me, вы вызываете show(), что в свою очередь вызывает .close(), что добавляет еще один X. Вместо этого вызовите близко от вашей init функции:

var red_layer = { 
    red_box: $('#layer_on'), 

    init: function() { 
     // Console.log(this); 
     $('<button></button>', { 

      text: 'push me' 

     }).insertAfter('.Main #last_child') 
       .on('click', this.show); 

     red_layer.close.call(red_layer.red_box); // <--- HERE 
    }, 

    show: function() { 
     // NOT HERE 

     red_layer.red_box.show(); 
    }, 

Демо: http://jsfiddle.net/xwmVr/

Я бы сказал, что ваш метод close не должен быть способом. Он просто добавляет кнопку X, которая кажется одноразовой. Это также не очевидно, что он делает. Похоже, что вызов close фактически закроет окно, но в этом случае это не так.

Answer 2

http://jsfiddle.net/mWghr/1/

В принципе проверить уже есть кнопка закрытия, то не preend

if($this.find('.close').length == 0) { 

Answer 3

Поскольку вы добавляете тег span в функцию close несколько раз, вы видите несколько «x». Я переписал твою близкую функцию так, и она отлично работает.

close: function() { 
     var that = $(this); 
     that.html('<span class="close">X</span>'); 
     that.on('click', function() { 
      that.hide(); 
     }); 
    }