jquery不会将我的列表元素添加到动态注入的<ul>列表</ul>

时间:2010-10-29 16:46:30

标签: jquery json list live

我真的不知道故障在哪里。这是我的代码:

$(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>

非常感谢帮助。

1 个答案:

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