0

Okay, I've kind of painted myself into a corner, with respect to my jQuery (I'm learning).

In the HTML I have:

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

And the jQuery is:

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

While this all works for the first run, I need to add a click event to the unnumbered list item in the .append() function. Sadly, I don't know how.

Just so you know, I'm attempting to create a folder selector, which the unnumbered list is designed to render.

4

2 回答 2

6

您可以使用.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(){...})

现场演示

于 2013-06-14T21:26:08.683 回答
0

最后，我再次尝试了 .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() 未编号的列表，以确保我不只是将一个文件夹层次结构附加到另一个层次。

于 2013-06-15T09:58:18.013 回答