Question

好吧，关于我的jQuery（我正在学习），我已经把自己画成了一个角落。

在HTML中我有：

<div class="folders-hierarchy">
    <ul id="folders-hierarchy"></ul>
</div>

jQuery是：

$(document).ready(function(){
    function get_folders_hierarchy () {
        var folder_id = ($(this).attr("data-folder") == false) ? 0 : $(this).attr("data-folder");
        $.ajax({
            url: base_url + "folders/jq_get_folders_hierarchy/" + 0,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            cache: false,
            success: function (element) {
                for (var i=0;i<element.length;i++) {
                    $("#folders-hierarchy").append('<li data-folder="' + element[i].folder_id + '">' + element[i].name + '</li>');
                }
            }
        });
    }
    get_folders_hierarchy();
});

虽然这一切都适用于第一次运行，但我需要在.append（）函数中向未编号的列表项添加一个click事件。可悲的是，我不知道如何。

您知道，我正在尝试创建一个文件夹选择器，其中未编号的列表旨在呈现。

Answer 1

您可以使用.on()使用delgation预先绑定未来的元素

$('#folders-hierarchy').on('click', 'li', function(){...})

基本上这使用事件委托机制，您实际上将事件绑定到容器，该容器将事件委托给将来（以及现在存在）添加到此容器下的li。

参见 .on()

您应确保在绑定此事件后未动态添加'#folders-hierarchy'，并且在DOM中始终可以将事件委托给其li元素。如果这不是容器，你希望你可以去任何给定点的DOM中存在的另一个容器（可能更高）并确保它在document.ready

下

由于您使用的是旧版本的jquery，因此可以使用live。

 $('#folders-hierarchy li').live('click', function(){...})

Demo with live

Answer 2

最后，我再次尝试了.delegate（）函数 - 这是我来到这里之前失败的地方 - 我已经弄明白了：

$(document).ready(function(){
    var folder_id;
    $("#folders-hierarchy").delegate('li', 'click', function(event){
        event.preventDefault();
        folder_id = ($(this).attr("data-folder") == false) ? 0 : $(this).attr("data-folder");
        get_folders_hierarchy(folder_id);
    })
    function get_folders_hierarchy (folder_id) {
        $.ajax({
            url: base_url + "folders/jq_get_folders_hierarchy/" + folder_id,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            cache: false,
            success: function (element) {
                $("#folders-hierarchy").empty();
                if (element != null) {
                    for (var i=0;i<element.length;i++) {
                        $("#folders-hierarchy").append('<li data-folder="' + element[i].folder_id + '"><a href="#folder">' + element[i].name + '</a></li>');
                    }
                }
            }
        });
    }
    get_folders_hierarchy(0);
});

还需要.empty（）每个循环之前的未编号列表，以确保我不只是将一个级别的文件夹层次结构附加到另一个。

如何在jQuery中向.append（）数据添加click事件？

2 个答案:

Demo with live