なぜこのjqueryコードが「Xボタン」のコピーをたくさん作成するのですか？

Question

問題が見つかりません。赤いレイヤーを閉じると、最初のボタンをもう一度クリックすると、このコードが「X」ボタンのコピーを何回作成するのですか？

私はinitがちょうど1回実行される適切なコンストラクタのように働いていると思っていましたか？お時間を

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

ありがとう：

は、ここで問題点を説明するjsfiddleです！

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ボタンを追加するだけです。これは1回限りのようです。それが何をしているのかも分かりません。 closeを呼び出すと実際にボックスが閉じられるようですが、この場合は表示されません。

Answer 2

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

は、基本的には、その後、閉じるボタンが既に存在するかどうかをチェックしませんプリペンド

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

Answer 3

閉じる関数にspanタグを複数回追加するので、複数の 'x'が表示されます。私はあなたのクローズ機能をそう書き直しました。完璧に機能します。

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