为什么这个jquery代码会创建多个；X按钮“；？

我找不到问题。为什么当我关闭红色层并再次单击第一个按钮时，该代码会复制许多“X”按钮的副本

我认为

init

就像一个只运行一次的正确构造函数，对吗

下面是一个JSFIDLE，说明了问题：

谢谢你的时间

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>

Lorem ipsum dolor sit amet，是一位杰出的献身者。
Phasellus non nisl mauris。Phasellus eget viverra mi。
库拉比图尔元素的三重性，以及爱欲
酵母菌。佩伦茨克非尼西奥古斯。
马来酸痛性便利盲。Sed bibendum lacus
紫罗兰。
我是森佩尔·贾斯托直径

Lorem ipsum dolor
坐在阿梅特，献身于和平的精英。
Phasellus non nisl mauris。Phasellus eget viverra mi。
乌尔里特岛库拉比图特乌尔里特岛。

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 )

})();

（函数（）{
$（'html'）.addClass（'js'）；
//红层；
var red_层={
红色方框：$（“#图层_on”），
init:function（）{
$('', {
文字：“推我”
}).insertAfter（'.Main#last_child'）。on（'click'，this.show）；
},
show:function（）{
红色层。关闭。调用（红色层。红色框）；
red_layer.red_box.show（）；
},
关闭：函数（）{
var$this=$（this）；
$（'X'）.prependTo（this）.on（'click'，function（））{
$this.hide（）；
});
}
//匿名函数
}；//红色_层对象结束
red_layer.init（）；//我们调用它（函数）
})();

基本上检查关闭按钮是否已经存在，然后不要预先设置

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

---

为什么不在

init

方法中添加关闭按钮？只需添加一次按钮。实际上，每次显示该框时都会添加

X

按钮。每次单击

push me

，您都会调用

show（）

，而show（）又会调用

.close（）

，这会将另一个

X

添加到框中。相反，从

init

函数调用close：

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();
    },

var red\u层={
红色方框：$（“#图层_on”），
init:function（）{
//Console.log（this）；
$('', {
文字：“推我”
}).insertAfter（“.Main#last_child”）
.on（'click'，this.show'）；
red_layer.close.call（red_layer.red_box）；//由于您在close函数中多次添加span标记，您会看到多个“x”。我像这样重写了close函数，效果非常好

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

close:function（）{
var，该值=$（此值）；
html（'X'）；
在（'click'，function（）上{
那。隐藏（）；
});
}
将此应用于JSFIDLE将非常有用helpful@Brian这是！！克利克在“这里”哦，谢谢…不知道你可以用这种方式检查它…你在这里检查类的长度是什么？嗯，每次单击时调用添加按钮是没有用的，但是第一次就阻止了。这就是
init
方法的作用。@YoniGeek基本上检查类
关闭时是否有span
已经存在了，nvm tho，只需在INIT中完全遵循@Jeff的
有用的
解决方案（因为它是唯一的构造函数对吗？）：谢谢，伙计！jquery的语法让我发疯了（我还不习惯它…方法和函数是如何呈现的…mm，mm这将用一个关闭按钮替换框中的任何内容。