CODEWITHSUNDEEP
jquery
Wayne Smallman
Wayne Smallman

Reputation: 1720

How do I add a click event to .append() data in jQuery?

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.

Upvotes: 0

Views: 1425

Answers (2)

Wayne Smallman
Wayne Smallman

Reputation: 1720

In the end, I tried the .delegate() function again — which is where I failed prior to coming here — and I've figured it out:

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

It was also necessary to .empty() the unnumbered list prior to each loop, to ensure I wasn't just appending one level of folder hierarchy to another.

Upvotes: 0

PSL
PSL

Reputation: 123739

You can use .on() to prebind the elements for the future using delgation

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

Basically this uses event delegation mechanism, you are actually binding the event to the container which will delegate the event to li that are added in the future (as well as present now) under this container.

See .on()

You should make sure you '#folders-hierarchy' is not added dynamically after binding this event and is available all the time in DOM to have the event delegated to its li elements. If this is not the container, you want you could go for another container (probably higher up) that will exist in DOM any given point And make sure this is under document.ready

Since you are using older version of jquery you can use live.

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

Demo with live

Upvotes: 6

Related Questions