jQuery Easyui 비동기 로딩 트리 문제 분석

로컬에서 json 파일을 로드하고 이벤트를 통해 ul에 동적으로 삽입하려고 하는데 작은 버그가 발생했습니다

html의 코드는 이렇습니다

<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
});
}

처음에는 버튼 클릭 이벤트를 통해 트리의 내용을 동적으로 로드하고 싶었습니다. 위의 코드에서 addAttr2Tree는 버튼 클릭에 해당하는 로컬 json 데이터를 html의 ul 태그에 추가하는 데 사용되며,changeImgSrc는 일부 트리 노드를 선택하고 이미지를 로드하는 데 사용되지만 디버깅 방법에 관계없이 항상 오류가 나타납니다.

속성 속성을 획득할 수 없습니다! ! ! json 파일의 속성이 그대로 유지되는 것을 반복해서 확인했는데 처음 버튼을 클릭할 때 항상 이 오류가 발생했습니다. 두 번째 이후부터는 이 오류가 발생하지 않습니다.

나중에 생각해보니, json 데이터의 동적 로딩 속도가 프로그램 코드 실행 속도만큼 빠르지 않기 때문인가요? !

제가 예상했던 바로 그거예요! easyui의 Tree에는 onLoadSuccess 메소드가 있습니다. 데이터가 성공적으로 로드되면 일부 작업이 수행됩니다.
그래서

$(".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);
}
});
});

코드가 변경됩니다. 이것으로 그게 다입니다.

이상은 에디터가 소개한 jQuery Easyui 비동기 로딩 트리 문제에 대한 분석입니다. 궁금한 사항이 있으면 메시지를 남겨주시면 에디터가 답변해 드리겠습니다. 당신은 시간에. 또한 PHP 중국어 웹사이트를 지원해 주신 모든 분들께 감사드립니다!

jQuery Easyui 비동기 트리 로딩 문제 분석 관련 기사를 더 보려면 PHP 중국어 웹사이트를 주목하세요!