javascript - 为什么这个 jQuery 函数在多次调用时会失败？

Question

我创建了一个对话框和一个 jQuery 函数来打开/关闭它。我的问题是，在我第二次单击“打开”按钮后，发生了一些事情，它不会删除 show 类。

我猜是因为第一次调用后，第二次调用时“它还在那里”。 I have me JS fiddle here to test .

我做错了什么导致它不起作用？

// JS code
$.fn.sl_dialog = function(params){
    var self = this;

    self.after('<div class="dialog-background"></div>')
    $('.dialog').toggleClass('show');

    $('.dialog .close, .dialog .button.no').on('click', function(){
        $('.dialog-background').remove();
        $('.dialog').toggleClass('show');
    });

    return false;
}


$('.clickme').on('click', function(){
    $('.dialog').sl_dialog();
});

Answer 1

将onclick移到函数外

$.fn.sl_dialog = function(params){
    var self = this;
    self.after('<div class="dialog-background"></div>')
    $('.dialog').toggleClass('show');
    return false;
}
$('.dialog .close, .dialog .button.no').on('click', function(){
    $('.dialog-background').remove();
    $('.dialog').toggleClass('show');
});

这是更新的 Fiddle