Question

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

我猜它是因为在第一次被叫之后，＃34;它还在那里＆＃34;我第二次打电话的时候。 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

Answer 2

问题是初始化函数（sl_dialog）每次初始化对话框时都会绑定关闭处理程序，因此当您重新打开对话框时，事件再次被绑定。

关闭对话框时，处理程序正在运行两次，toggleClass('show')正在恢复自身。

在应用之前取消绑定处理程序：

$('.dialog .close, .dialog .button.no').off().on('click', function(){ ...

或使用one()：

$('.dialog .close, .dialog .button.no').one('click', function(){ ...

请参阅one()和off()文档。

Answer 3

我能够通过更改toggleClass来指定addClass removeClass

来解决此问题

http://jsfiddle.net/b877sc20/6/

我不是百分之百为什么这很重要，但似乎

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

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

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

    return false;
}


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

Answer 4

问题是你正在多次注册点击事件，正如其他人所说的那样。

尝试添加一个标志来检测您是否是第一次调用该方法，这样就可以避免多次添加相同的事件处理程序。

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

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

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

        // Add the flag to avoid registering again
        self.data('initialized', true); 
    }

    return false;
}

DEMO

Answer 5

如果您需要功能区中的所有代码，则必须取消绑定click事件，因为每次单击时它都会绑定。试试这个

http://jsfiddle.net/ycsqequf/

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

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

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

return false;
}


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

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

5 个答案: