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

标签 javascript jquery

我创建了一个对话框和一个 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();
});

最佳答案

将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

关于javascript - 为什么这个 jQuery 函数在多次调用时会失败?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25505611/

相关文章:

javascript - Extjs - 如何使用 Ext.util.Observable 获取所有表单对象事件单击?

javascript - 确保多重选择元素选择了非空选项

jquery - 垂直 Accordion 内容 slider 理想 jQuery

javascript - 如何使用 Ajax 每个函数和动态数量的 DIV 标签

jQuery显示div点击隐藏然后不再显示

javascript - 点击后。一个函数被多次调用……为什么?

javascript - 在另一个 ng-repeat 中使用 ng-repeat

javascript - 如何从JavaScript中的给定字符串获取数据?

Javascript 构造函数与 Typescript 类

jQuery 事件目标/相关目标问题