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

Posted 2023-02-25

【中文标题】jquery在点击事件后等待ajax加载完成

【英文标题】：jquery wait for ajax load to complete after click event

【发布时间】：2015-09-27 13:23:59

【问题描述】：

我正在开发一个使用 ajax 分层导航的 magento 网站。当用户单击分层导航中的颜色链接时，它会加载相关产品的列表。我想在 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()
    

【问题讨论】：

为什么不在ajax调用中调用成功函数结束时的点击？

点击 a#red-hoi-swatch 时，代码在哪里加载（通过 ajax）相关产品？是在别处做的吗？还是您没有将所有代码都放在示例中？

提供您的 ajax，以便我们了解您是如何初始化它的。

@EternalHour，刚刚发布在我的问题中。

【参考方案1】：

我能够通过ajaxComplete() function 实现这一目标：

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

【讨论】：

这太棒了，就像一个魅力！谢谢！！

【参考方案2】：

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

在你的 ajax 调用成功时调用你的点击事件

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

在 ajax 调用成功时回调 click 事件。

【讨论】：

将 async 属性设置为 false 已被弃用，并且正在被删除 (xhr.spec.whatwg.org/#sync-warning)。它不适用于最新的 Chrome (2016-04-26)。

【参考方案3】：

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

【参考方案4】：

暂时没有做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();
    );
);

【讨论】：

它不起作用，我不知道在 url 中放什么。我从<a> 中输入了href，这似乎触发了ajax，即http://dev.mysite.local/clothing.html?hoi_search_colors=109