jquery - 附加到动态元素？

Question

我有来自数据库的记录，其中包含每条记录的父子数据。我正在尝试创建父子列表，但在创建子列表时遇到问题：

$(document).ready(function() {
    var objCategories = new Object ({
        id: 0
    });
    $('#load-structures').click(function(event) {
        event.preventDefault();
        objCategories.id = $(this).attr("data-category");
        categories();
    });
    function categories() {
        $(".flash").show();
        $(".flash").fadeIn(400).html("Loading...");
            $.ajax({
                url: base_url + "notes/jq_get_structures/" + objCategories.id,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                cache: false,
                success: function (element) {
                    $(".flash").hide();
                    $(".load-link").addClass("link-none");
                    for (var i=0;i<element.length;i++) {
                        if (element[i].parent == 0) {
                            $("#links-structures-parents").append('<li id="structure-parent-' + element[i].structure_id + '"><a href="#structures" title="View ' + element[i].name + '" class="structures">&lsquo;' + element[i].name + '&rsquo;</a></li>');
                        } else if (element[i].parent > 0) {
                            if ($('#structure-children-' + element[i].structure_id).length) {
                                $("#structure-children-" + element[i].structure_id).append('<li id="structure-child-' + element[i].structure_id + '"><a href="#structures" title="View ' + element[i].name + '" class="structures">&lsquo;' + element[i].name + '&rsquo;</a></li>');
                            } else {
                                $("#structure-parent-" + element[i].structure_id).html('<ul id="structure-children-' + element[i].structure_id + '">');
                                $("#structure-parent-" + element[i].structure_id).html('<li id="structure-child-' + element[i].structure_id + '"><a href="#structures" title="View ' + element[i].name + '" class="structures">&lsquo;' + element[i].name + '&rsquo;</a></li>');
                                $("#structure-parent-" + element[i].structure_id).html('</ul>');
                            }
                        }
                    }
                },
                error: function () {
                    $("#links-structures-parents").empty();
                    $("#links-structures-parents").append('<li>There are no Structures.</li>');
                }
            }
        );
    }
});

数据本身没有问题，而是我尝试创建子列表的条件部分。

我有一些示例代码，尽管在我的一生中，我无法让它与本地数据一起运行，但我希望有人知道诀窍是什么。

Answer 1

您在 else 语句中的代码重写了 html 代码，因此最后一次调用只是使元素具有</ul>，您需要将以前的 html 代码与新部分一起添加，或者一口气完成所有操作。

else {
    var eleobj = $("#structure-parent-" + element[i].structure_id);
    eleobj.html('<ul id="structure-children-' + element[i].structure_id + '">');
    eleobj.html(eleobj.html()+'<li id="structure-child-' + element[i].structure_id + '"><a href="#structures" title="View ' + element[i].name + '" class="structures">&lsquo;' + element[i].name + '&rsquo;</a></li>');
    eleobj.html(eleobj.html()+'</ul>');

    //Though you could do this in one call
    eleobj.html(
        '<ul id="structure-children-' + element[i].structure_id + '">'+
        '<li id="structure-child-' + element[i].structure_id + '">'+
        '<a href="#structures" title="View ' + element[i].name + '" class="structures">&lsquo;' + element[i].name + '&rsquo;</a>' +
        '</li></ul>'
    );
}

Answer 2

好的，最后还是父子id属性的问题：

$(document).ready(function() {
    var objCategories = new Object ({
        id: 0
    });
    $('#load-structures').click(function(event) {
        event.preventDefault();
        objCategories.id = $(this).attr("data-category");
        categories();
    });
    function categories() {
        $(".flash").show();
        $(".flash").fadeIn(400).html("Loading...");
            $.ajax({
                url: base_url + "notes/jq_get_structures/" + objCategories.id,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                cache: false,
                success: function (element) {
                    $(".flash").hide();
                    $(".load-link").addClass("link-none");
                    for (var i=0;i<element.length;i++) {
                        if (element[i].parent == 0) {
                            $("#links-structures-parents").append('<li id="structure-parent-' + element[i].structure_id + '"><a href="#structures" title="View ' + element[i].name + '" class="structures">&lsquo;' + element[i].name + '&rsquo;</a>');
                        } else if (element[i].parent > 0) {
                            var htmlElementParent = $("#structure-parent-" + element[i].parent);
                            var htmlElementChild = $("#structure-children-" + element[i].parent);
                            var htmlElementChildren = $("ul#structure-children-" + element[i].parent + " li");
                            if (htmlElementChildren.length == 0) {
                                htmlElementParent.append(
                                    '<ul id="structure-children-' + element[i].parent + '">' +
                                    '<li id="structure-child-' + element[i].structure_id + '">' +
                                    '<a href="#structures" title="View ' + element[i].name + '" class="structures">&lsquo;' + element[i].name + '&rsquo;</a>' +
                                    '</li></ul>'
                                );
                            } else if (htmlElementChildren.length > 0) {
                                htmlElementChild.append(
                                    '<li id="structure-child-' + element[i].structure_id + '">' +
                                    '<a href="#structures" title="View ' + element[i].name + '" class="structures">&lsquo;' + element[i].name + '&rsquo;</a>' +
                                    '</li>'
                                );
                            }
                        }
                    }
                    $("#load-structures").hide();
                },
                error: function () {
                    $("#links-structures-parents").empty();
                    $("#links-structures-parents").append('<li>There are no Structures.</li>');
                }
            }
        );
    }
});

在这里，您会看到我将附加到其 id 属性包含父值的未编号列表，然后将列表项提供给它们各自且正确的未编号列表。