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

Question

我正在使用ajax分层导航的magento网站上工作。 当用户单击分层导航中的颜色链接时，它将加载相关产品列表。 我想在ajax完成后触发点击事件。

我以为我可以为此使用jQuery when（）函数，但无法正常工作。

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

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

更新我找到了对此负责的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

我能够通过ajaxComplete（）函数实现这一目标 ：

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

Answer 2

您可以选择以下3个

1. 成功调用ajax调用click事件

2. 您可以将ajax调用的asynch属性设置为false；

3. 在您的Ajax调用成功时回调click事件。

Answer 3

暂时没有完成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 4

您可以在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" );
});