jquery 在单击事件后等待 ajax 加载完成

Question

我正在开发一个使用 ajax 分层导航的 magento 网站。当用户在分层导航中单击颜色 link 时，它会加载相关产品的列表。我想在 ajax 完成后触发点击事件。

我以为我可以为此使用 jQuery when() 函数，但我无法让它工作。

jQuery( "a#red-hoi-swatch" ).click(function() {
    jQuery.when( jQuery.ajax() ).then(function() {
      jQuery("a[name*='chili-ireye']").click();
    });
});

基本上，当用户单击 a#red-hoi-swatch 时，我想在 ajax 完成后运行 jQuery("a[name*='chili-ireye']").click();。

更新我发现 ajax 对此负责，它来自我们购买的 Magento Blacknwhite 主题

/*DONOT EDIT THIS CODE*/
function sliderAjax(url) {
    if (!active) {
        active = true;
        jQuery(function($) {
            oldUrl = url;
            $('#resultLoading .bg').height('100%');
            $('#resultLoading').fadeIn(300);
            try {
                $('body').css('cursor', 'wait');
                $.ajax({
                    url: url,
                    dataType: 'json',
                    type: 'post',
                    data: data,
                    success: function(data) {
                        callback();
                        if (data.viewpanel) {
                            if ($('.block-layered-nav')) {
                                $('.block-layered-nav').after('<div class="ajax-replace" />').remove();
                                $('.ajax-replace').after(data.viewpanel).remove();
                            }
                        }
                        if (data.productlist) {
                            $('.category-products').after('<div class="ajax-category-replace" />').remove();
                            $('.ajax-category-replace').after(data.productlist).remove();
                        }
                        var hist = url.split('?');
                        if(window.history && window.history.pushState){
                            window.history.pushState('GET', data.title, url);
                        }
                        $('body').find('.toolbar select').removeAttr('onchange');
                        $('#resultLoading .bg').height('100%');
                        $('#resultLoading').fadeOut(300);
                        $('body').css('cursor', 'default');
                        ajaxtoolbar.onReady();
                        jQuery('.block-layered-nav a').off('click.vs');
                        try{
                            ConfigurableSwatchesList.init();
                        }catch(err){}
                    }
                })
            } catch (e) {}
        });
        active = false
    }
    return false
}


function callback(){
    }

Answer 1

暂时没做 jQuery 但你真的需要 .when() 吗？

你能不能不做

jQuery( "a#red-hoi-swatch" ).click(function() {
    var url = 'http://my/api/url';
    jQuery.ajax(url).then(function() {
      jQuery("a[name*='chili-ireye']").click();
    });
});

Answer 2

您可以在 ajax 查询之后立即使用处理程序，或者您可以为 ajax 查询定义成功回调。来自 jQuery API:

// Assign handlers immediately after making the request,
// and remember the jqXHR object for this request
var jqxhr = $.ajax( "example.php" )
  .done(function() {
    alert( "success" );
  })
  .fail(function() {
    alert( "error" );
  })
  .always(function() {
    alert( "complete" );
  });

// Perform other work here ...

// Set another completion function for the request above
jqxhr.always(function() {
  alert( "second complete" );
});

Answer 3

你可以做以下3个中的任何一个

在 ajax 调用成功时调用点击事件
您可以将 ajax 调用的异步属性设置为 false；
在 ajax 调用成功时回调点击事件。

Answer 4

我能够通过 ajaxComplete() function:

实现这一点

jQuery( "a#red-hoi-swatch" ).click(function() {
    jQuery(document).ajaxComplete(function(){
        jQuery("a[name*='chili-ireye']").click();
    });
});

jquery 在单击事件后等待 ajax 加载完成

jquery wait for ajax load to complete after click event

javascript

ajax

jquery

.when