我真的不知道故障在哪里。这是我的代码:
$(document).ready(function(){
$("#folderTree > li").live('click',function(){
var id = $(this).attr("id");
if($('#' + id).hasClass('folderClosed')){
$.ajax({
url: "libs/php/ajax/documents/treeHandler.php",
type: "POST",
cache: false,
dataType: "json",
data: "treeNode=" + id,
success: function(data){
$('#' + id).removeClass('folderClosed');
$('#' + id).addClass('folderOpen');
$('#' + id).after('<ul id="#' + id + '-list">');
$.each(data, function(){
var folder = '<li id=' + this.ID + ' class="folderClosed">' + this.folderName + '</li>';
$("#" + id + "-list").append(folder);
})
$('#' + id).after('</ul>');
}
})
}else{
$('#' + id).next("ul").remove();
$('#' + id).removeClass('folderOpen');
$('#' + id).addClass('folderClosed');
}
})
})
我正在构建一个基于mysql数据结构的文件夹树,它通过ajax加载为json代码。到目前为止一切正常!
我唯一的问题是我的脚本无法将var文件夹添加到新注入的元素。
Firebug示例代码:
<ul id="folderTree">
<li class="folderOpen" id="1">100_Projektmanagement</li>
<ul id="#1-list"></ul>
<li class="folderClosed" id="3">200_Projektinitialisierung</li>
<li class="folderClosed" id="4">300_Voranalyse_Studien</li>
<li class="folderClosed" id="5">400_Konzepte</li>
</ul>
非常感谢帮助。
答案 0 :(得分:4)
你在这里添加了一个ID不正确的元素(不要在创建选择器时将哈希添加到属性中):
$('#' + id).after('<ul id="#' + id + '-list">');
//should be:
$('#' + id).after('<ul id="' + id + '-list">');
整体效率会更高一点:
success: function(data){
var parent = $('#' + id).removeClass('folderClosed').addClass('folderOpen');
var list = $('<ul />', { id: id + '-list' });
$.each(data, function(){
$('<li />', { id: this.id, "class": "folderClosed", text: this.folderName })
.appendTo(list);
})
list.insertAfter(parent);
}