Analysis of the problem of jQuery Easyui asynchronously loading tree

When I want to load json files from the local and dynamically insert them into ul through events, I encountered a small bug

The code in the html is like this

<ul class="easyui-tree" id="tt"></ul>

Code in js

$(".next-menu:nth-child(1) a").click(function() {
var $IDstr = $(this).attr("id"),
$treeIDNum = parseInt($(this).attr("treeID")),
jsonURL = "json/" + $IDstr + ".json",
node;
addAttr2Tree(jsonURL)；
changeImgSrc($treeIDNum);
});
});
function changeImgSrc(nodeID){
var node = $("#tt").tree('find', nodeID);
if(node){
$("#tt").tree('select', node.target);
}
if (node.attributes) {
$("#img-box").attr("src", node.attributes.url);
}
}
function addAttr2Tree(URL){
$("#tt").tree({
url: URL,
method: "get",
animate: true,
lines: true
});
}

At first, I wanted to dynamically load the content of the tree through a button click event. This is the code above. addAttr2Tree is used To add the local json data corresponding to when the button is clicked to the ul tag in the html, changeImgSrc is some selection operations on the tree node and loading of images, but no matter how you debug, an error will always appear

Unable to obtain attributes attribute! ! ! I have repeatedly confirmed that the attributes are intact in the json file and this error always occurs when the button is clicked for the first time. The second time and thereafter, this error does not occur.

Later I thought, is it because the speed of dynamic loading of json data is not as fast as the speed of program code execution? !

As expected! Tree in easyui comes with a method onLoadSuccess. When the data is successfully loaded, some operations will be performed
So

$(".next-menu:nth-child(1) a").click(function() {
var $IDstr = $(this).attr("id"),
$treeIDNum = parseInt($(this).attr("treeID")),
jsonURL = "json/" + $IDstr + ".json",
node;
addAttr2Tree(jsonURL);
$("#tt").tree({
onLoadSuccess: function(){
changeImgSrc($treeIDNum);
}
});
});

Just change the code to this .

The above is the analysis of the jQuery Easyui asynchronous loading of tree introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank you all for your support of the PHP Chinese website!

For more related articles on the problem analysis of jQuery Easyui asynchronous loading of tree, please pay attention to the PHP Chinese website!