Question

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

我认为我可以使用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();后完成ajax后运行a#red-hoi-swatch。

更新我找到了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() function：

实现这一目标

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

Answer 2

您可以进行以下任何一项

在您的ajax调用成功时调用您的click事件
您可以将ajax调用的asynch属性设为false;
在您的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" );
});

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

4 个答案: