Question

我已经为jQuery创建了一个插件，现在我在这个插件中发现了一个问题，当我使用它的时间或者更多时，我的回调函数每次都只使用最后一个回调函数，我所有的ajax调用都是关闭的那就完美了。

现在当我想调用成功的回调函数或错误回调函数时，我遇到了问题。

(function ( $ ) {
var setSettings = function(options,attrId) {
    var settings = $.extend({
        dataType: 'json',
        timeout: 600,
        alertToolbar: true,
        alertId : attrId,
        alertClass : 'dialogToolbar',
        callback_error : null,
        callback_success : null
    }, options );

    return settings;
}

var getToolbar = function(header, content, mode) {
    if ( mode == 'error' )
    {
        $( document.createElement('div') )
        .addClass('alertTopNav alertTopNav-error')
        .append(
            $( document.createElement('div') )
            .append(
                $( document.createElement('strong') )
                .html( header )
            )
            .append(
                $( document.createElement('br') )
            )
            .append( content )
        )
        .appendTo('#'+ settings.alertId )
        .slideDown()
        .delay(3000)
        .slideUp(800, function()
        {
            $(this).remove();
        });
    }
    else if ( mode == 'success' )
    {
        $( document.createElement('div') )
        .addClass('alertTopNav alertTopNav-success')
        .append(
            $( document.createElement('div') )
            .append(
                $( document.createElement('strong') )
                .html( header )
            )
            .append(
                $( document.createElement('br') )
            )
            .append( content )
        )
        .appendTo('#'+ settings.alertId )
        .slideDown()
        .delay(3000)
        .slideUp(800, function()
        {
            $(this).remove();
        });
    }
}
var functionId = 0;

$.fn.ajax_callback = function(call_url, call_data_array,call_settings) {
    settings = setSettings(call_settings,$(this).attr('id'));

    if (!$(this).hasClass("dialogToolbar")) {
        $(this).addClass('dialogToolbar');
    }

    $.ajax({
        type: 'POST',
        url: call_url,
        crossDomain: true,
        xhrFields: {withCredentials: true},
        data: call_data_array,
        dataType: settings.dataType,
        timeout: settings.timeout,
        beforeSend: function(data) {
            // do somthing before sending
        },
        success: function(data) {
            if(data.status==200) {
                if ( settings.callback_success != null ) {
                    settings.callback_success(data);
                }

                if (settings.alertToolbar == true ) {
                    getToolbar(data.success.header,data.success.msg,'success');
                }
            } else {

                if(settings.callback_error != null) {
                    settings.callback_error(data);
                }

                if (settings.alertToolbar == true ) {
                    getToolbar(data.error.header,data.error.msg,'error');
                }
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            // do somthing on error
        }
    });
}

}( jQuery ));

我使用此代码来调用此插件：

$('#dialogToolbar').ajax_callback('json-path-1',{
    'parms' : 'value'
}, {
    alertToolbar: false,
    callback_success: $.testObj.callback.getAll.success,
    callback_error: $.testObj.callback.getAll.error
});

如果我再使用这个，但改变成功和错误回调以及j的json路径。

$('#dialogToolbar').ajax_callback('json-path-2',{
    'parms' : 'value'
}, {
    alertToolbar: false,
    callback_success: $.testObj.callback.getAllSecound.success,
    callback_error: $.testObj.callback.getAllSecound.error
});

它唯一来自secound函数的成功和错误回调将起作用，所以现在我试图调试我的代码但是找不到eny上帝解释为什么会发生这种情况。

希望这里有一个可以解释我的目标是什么以及为什么我的插件无法正常工作。

Answer 1

您已在插件中将设置创建为全局变量，因此对插件的每次调用都将覆盖它。

var settings = setSettings(call_settings,$(this).attr('id'));

相反，您需要对当前设置对象进行本地引用，因此请将该变量创建为上面给出的函数的本地变量。

此外，您必须将设置参考传递给getToolbar

var getToolbar = function(settings, header, content, mode) {
}
.....
getToolbar(settings, data.success.header,data.success.msg,'success');

在jQuery中拥有自己的回调，无法调用secound回调函数

1 个答案: