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

关键词：

【中文标题】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

javascript在ajax提交过程中页面显示加载中，请等待效果，并在提交过程中限制确定按钮防止多次提交，提交完成后，解除提交限制

加载中，请等待div: <divid="load"class="center-in-center"style="display:none;"> <imgsrc="../resources/images/loader.gif"/>加载中，请等待...</div>确定重置按钮:<divclass="form-grouprow"><divc 查看详情

ajax成功后点击事件的jQuery Fancybox显示没有图像

】ajax成功后点击事件的jQueryFancybox显示没有图像【英文标题】：jQueryFancyboxonclickeventafterajaxsuccessshowsnoimages【发布时间】：2021-07-1917:37:24【问题描述】：在ajax请求的成功区域，我通过jQuery添加了一个onClickeventListener来打开fancybox。... 查看详情

关于ajax请求等待完成

象163邮箱，在发送邮件时，如果附件还没上传完成，会等待附件上传完成后再发送。这个是怎么实现得，给个思路~可以使用同步请求，等待ajax请求完成返回数据后在执行其他操作。例子JQueryajax$.ajax( type:"post",//get或post请... 查看详情

ajax调用后Jquery事件不会触发

】ajax调用后Jquery事件不会触发【英文标题】：JqueryEventwon\'tfireafterajaxcall【发布时间】：2012-11-2521:59:55【问题描述】：这是jquery的一个相当奇怪的问题。我正在加载一个div<divid="container">在页面加载时。每条记录都是表格数据... 查看详情

JQuery 在开始幻灯片之前等待页面完成加载？

】JQuery在开始幻灯片之前等待页面完成加载？【英文标题】：JQuerywaitforpagetofinishloadingbeforestartingtheslideshow?【发布时间】：2010-11-2816:29:23【问题描述】：我有一个带有旋转标题图片的网站（你们都看过）。我想做以下事情：加载... 查看详情

jquery在ajax新加入的元素后绑定事件click

使用YII在做一个点击小图。能够在弹出窗体中显示大图的功能的时候，发现。GridView首页面的列表项按点击时一切正常，但按下了下一页后。再点击小图，就不起作用了。原来，这是GridView使用了ajax分页，分页后的元素是新添加... 查看详情

完成所有 jquery ajax 请求后如何调整 iframe 的大小

】完成所有jqueryajax请求后如何调整iframe的大小【英文标题】：Howtoresizeaniframeafteralljqueryajaxrequestsaredone【发布时间】：2017-11-2201:35:05【问题描述】：我有一个包含iframe的html文档。父文档和iframe（wordpress博客）中的文档在同一个域... 查看详情

在jq中,当触发点击事件后,在此事件没完成之前,不能再触发点击事件,在事件完成后才能再次点击，该怎么弄

两种方法，一种，点击后，把按钮或链接的disabled设为true，让它变成不可用状态；二种，直接在程序里判断和设定。比如：var doing=false;//定义一个全局变量$("button.do").on("click",function()    if(doing)&n... 查看详情

在ajax调用中附加tbody后点击事件不起作用？

】在ajax调用中附加tbody后点击事件不起作用？【英文标题】：onclickeventnotworkingafterappendtbodyinajaxcall?【发布时间】：2021-12-1413:43:03【问题描述】：我正在使用带有jquery的php和mysql来显示我的数据。最初的我的on点击事件正在处理tbod... 查看详情

jquery事件处理，节点

事件处理：1、页面加载后的执行　　类似于window.onload但不同于window.onload　　jQuery加载后执行的特点：　　在DOM树加载完毕的时候就开始执行　　　　$(document).ready(function()　　　　//页面的初始化操作　　　　//DOM树加载完成后... 查看详情

jQuery 在提交表单之前等待 Ajax

】jQuery在提交表单之前等待Ajax【英文标题】：jQueryWaitforAjaxBeforeSubmittingForm【发布时间】：2017-09-0516:04:17【问题描述】：我想在提交表单之前完成三个Ajax功能，但它们也会在提交时触发。在发送表单之前强制jQuery等待所有Ajax函... 查看详情

jsp点击一个按钮后禁用按钮,执行完事件后再启用按钮

页面有个按钮在点击后往页面添加数据库数据，当还未添加完时在点击该按钮时如何让该按钮可点击但不调用事件直到上一次点击事件的数据全部添加到页面后在点击时才调用事件求高手帮忙如何更改该图片中的事件实现问题求... 查看详情

jquery页面加载等待特效，当数据加载完成效果消失的代码？

参考技术A页面加载等待特效，当数据加载完成效果消失的代码如下:$.ajax(url:"",type:"post",data:"xx":"xx",beforeSend:function()//这里是开始执行方法，显示效果，效果自己写,complete:function()//方法执行完毕，效... 查看详情

jquery怎么自动触发radio的点击事件

给对应的radio加个类名或者Id，然后在在需要触发的函数里写上对应radio的点击事件，如在页面加载完成时点击：<input type="radio" class="radiobox" />$(document).ready(function()    $(".radiobox&quo... 查看详情

如何中断慢速 ajax 请求，在后台运行

...个慢速PHP脚本发出AJAX异步请求，例如加载30秒3秒后用户点击某个链接转到另一个快速加载页面，但浏览器等待27秒完成对慢速脚本的AJAX请求，然后才开始加载下一页你如何解决这个问 查看详情

如何等待所有异步的初始化条件全部加载完成后，再执行方法

如果是jQuery1.5以上，ajax类函数返回的是deferred对象，jQ有一个方法叫when:$.when($.get(url1),$.get(url2),$.get(url3)).done(function(){/*code here*/});如果3次get有先后顺序，可以用pipe：$.get(url1).pipe($.get(url2)).pipe($.get(url3)). 查看详情

Selenium Webdriver - 等待页面在 Java 和 JavaScript 中完全加载（ajax/jquery/animation 等）

】SeleniumWebdriver-等待页面在Java和JavaScript中完全加载（ajax/jquery/animation等）【英文标题】：SeleniumWebdriver-waitforpagetocompletelyloadinJava&JavaScript(ajax/jquery/animationetc.)【发布时间】：2016-11-1423:48:38【问题描述】：我正在尝试构建一种... 查看详情

php上传功能怎么实现点击浏览在打开文件之后直接上传?

我的博客《用最简单的例子实现jQuery图片即时上传》已经做了详细的介绍，请参考实现。主要原理：jQuery上传插件将<input type="file">的数据转至一个新生的form当中将其提交，而表单的target指向新生的iframe，在iframe中做表单提... 查看详情