jquery – 我怎么能让$.each等到.trigger(‘click’)事件加载所有东西?

前端之家收集整理的这篇文章主要介绍了jquery – 我怎么能让$.each等到.trigger(‘click’)事件加载所有东西?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在$.get JSON成功函数中,我首先触发另一个元素的click事件:
$('#' + data[0].ID).trigger('click');

触发的click事件有自己的$.getJSON方法将一堆数据加载到div中.
触发事件后的下一行:

$.each(data[0].ListEntries,function (key,val) {
        //this relies on the triggered click event 
        //having completely loaded all data!
}

起初$.each似乎没有做任何事情,但我在触发事件后立即添加了警报.
响应警报后,$.each中的代码显示了它应该是什么.

我猜测$.each在点击事件完成加载数据之前正在运行.

setTimeout暂停足够长的时间以使click事件加载数据,但我宁愿不设置任意时间:

setTimeout(function() { 
    $.each(data[0].ListEntries,val) {
        //this relies on the triggered click event 
        //having completely loaded all data!
    }
},1000);

我也试过$.when和$.then无济于事(尽管在$.each里面添加提醒,然后在$.然后为$.each工作创建延迟):

$.when($('#' + data[0].ID).trigger('click')).then(function () {
    $.each(data[0].ListEntries,val) {
        //this relies on the triggered click event 
        //having completely loaded all data!
    })

解决方法

整理得更清晰

.trigger()返回一个jQuery对象,因此您无法选择执行$.when()… $.then().

另一方面,.triggerHandler()将返回您选择的对象,从而可以执行延迟技巧.

您的代码分为三个功能,简化如下.调用路径是1,2,3,最重要的返回路径是3,1.

(1)最高级别(JSON成功)功能包括以下几行:

function() {
    ...
    $.when($('#' + data[0].ID).triggerHandler('click')).done(function() {
        $.each(data[0].ListEntries,val) {
            ...
        });
    });
    ...
};

(2)由(1)触发的点击处理程序如下:

$("img.Button").on("click",function () {
    return GetModels(this.id);//here `return` passes on the jqXHR object,up the return path.
});

(3)包含JSON的最低级函数(1)所依赖的函数将具有以下一般形式:

function GetModels(id) {
    ...
    var jqXHR = getJSON(function(){...});
    ...
    return jqXHR;//it is vital to retutn the jqXHR object arising from the json call.
}

备注:

>返回路径作为(1)中.when()方法的“promise”参数传递,jqXHR对象来自(3)中的.getJSON()调用.因此,(1)中的链式.done()被强制等待jqXHR被解析(即完成),然后才触发作为其参数提供的函数.> click处理程序不会假设它是如何被调用的.它只返回jqXHR对象.因此,当使用.triggerHandler()调用时,单击处理程序可以附加其他行为,而不会影响正常的单击操作.>直接从(1)调用GetModels()会更简单,切断中间人(2),如果GetModels()行为是唯一需要的话,这很好.但是,如果(1)需要响应未来对触发的点击处理程序(2)的任何更改,则需要采用上述方法.

原文链接:https://www.f2er.com/jquery/178676.html

猜你在找的jQuery相关文章