在$.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.
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)的任何更改,则需要采用上述方法.
