我是否需要使用jQuery .load()的选择器?

时间:2012-09-11 19:53:37

标签: jquery

我有以下内容:

function callback_function(a,b,c) {
    var aa = a;
    var bb = b;
    $('#content').html("xxx");
}

$('#content').load(href, "", function (a, b, c) { callback_function(a, b, c) });

我想要做的是将值“xxx”放入div#content的html中。有人可以解释如何做到这一点?我认为它可以与callback_function中的代码一起使用但是如果有效,那么实际的.load()是否也会将一些数据放入#content

如果我在.load()中执行所有操作,我甚至需要callback_function()左侧的内容。我希望这是有道理的。请注意,它还没有准备就绪。我意识到我需要重命名参数,进行错误检查等。

请注意我想使用 .load 而不是.ajax。因为我使用以下包装器。提前抱歉这是很多代码:

$.fn.loadWithEffect = function()
{
    // Add effect layer
    this.addEffectLayer({
        message: $.fn.loadWithEffect.defaults.message
    });

    // Rewrite callback function
    var target = this;
    var callback = false;
    var args = $.makeArray(arguments);
    var index = args.length;
    if (args[2] && typeof args[2] == 'function')
    {
        callback = args[2];
        index = 2;
    }
    else if (args[1] && typeof args[1] == 'function')
    {
        callback = args[1];
        index = 1;
    }

    // Custom callback
    args[index] = function(responseText, textStatus, XMLHttpRequest)
    {
        // Get the effect layer
        var refElement = getNodeRefElement(this);
        var layer = $(refElement).next('.loading-mask');
        var span = layer.children('span');

        // If success
        if (textStatus == 'success' || textStatus == 'notmodified')
        {
            // Initial callback
            if (callback)
            {
                callback.apply(this, arguments);
            }

            // Remove effect layer
            layer.stop(true);
            span.stop(true);
            var currentMarginTop = parseInt(span.css('margin-top'));
            var marginTop = parseInt(span.css('margin-top', '').css('margin-top'));
            span.css({'marginTop':currentMarginTop+'px'}).animate({'opacity':0, 'marginTop':(marginTop-40)+'px'}, {
                'complete': function()
                {
                    layer.fadeAndRemove();
                }
            });
        }
        else
        {
            span.addClass('error').html($.fn.loadWithEffect.defaults.errorMessage+'<br><a href="#">'+$.fn.loadWithEffect.defaults.retry+'</a> / <a href="#">'+$.fn.loadWithEffect.defaults.cancel+'</a>');
            span.children('a:first').click(function(event)
            {
                event.preventDefault();

                // Relaunch request
                $.fn.load.apply(target, args);

                // Reset
                span.removeClass('error').html($.fn.loadWithEffect.defaults.message).css('margin-left', '');
            });
            span.children('a:last').click(function(event)
            {
                event.preventDefault();

                // Remove effect layer
                layer.stop(true);
                span.stop(true);
                var currentMarginTop = parseInt(span.css('margin-top'));
                var marginTop = parseInt(span.css('margin-top', '').css('margin-top'));
                span.css({'marginTop':currentMarginTop+'px'}).animate({'opacity':0, 'marginTop':(marginTop-40)+'px'}, {
                    'complete': function()
                    {
                        layer.fadeAndRemove();
                    }
                });
            });

            // Centering
            span.css('margin-left', -Math.round(span.outerWidth()/2));
        }
    };

    // Redirect to jQuery load
    $.fn.load.apply(target, args);

    return this;
};

2 个答案:

答案 0 :(得分:1)

而不是load()使用ajax()

$.ajax({
   url : href,
   success:function(data){
      callback_function(a, b, c) });
    }
})

答案 1 :(得分:1)

只需更改代码,这样就不会进行两次选择:

function callback_function(a,b,c) {
    var aa = a;
    var bb = b;
    $(this).html("xxx"); //<-- key!
}

$('#content').load(href, callback_function);

或使用.ajax代替.load

function callback_function(a,b,c) {
    var aa = a;
    var bb = b;
    $("#content").html("xxx"); 
}
$.ajax({
   url : href,
   success: callback_function
});