Question

On site: http://jonirautiainen.net/code_edit/ there on left is a panel which has a filetree.

.load(‘scandDir.php’) loads new <ul><li></li></ul> elements from php-file.

The problem is that because this script is a loop it executes loadNew(); multiple times.
Please check the problem live on page mentioned before. Click on those folders to open them and you will see those files showing up multiple times.

Script needs to be looped because .load is asynchronous. $(".file-tree a").on( won’t let me select those new elements created by executing .load.

Is there any other way to do this?

    function loadNew()
    {
        $(".file-tree a").on("click",function ()
        {
                var path = $(this).attr("title");
                var folder = $(this).text();
                var name = $(this).attr("name");
                var id = $(this).parent().attr("id");
                $("#testi").html(path + folder + name + id);
                var liHtml = $(this).parent().html();               
                    if(liHtml.match(/<ul /))
                    {           

                    }else
                    {
                        if(name=="dir")
                        {
                            $("#hiddenDiv1").load("scanDir.php?path=" + path + "/" + folder, function() {
                              var hiddenDiv = $("#hiddenDiv1").html();
                                $("#" + id).append(hiddenDiv); 
                                loadNew();
                            });
                        }
                    }

        });
    }
    loadNew();

Answer 1

You keep piling on new click handlers. I understand that you’re loading new elements and they need to have their events handled too, but in the process you’re adding more handlers to the existing elements. So after you expand several directories, the older elements will have a couple of handlers on them; and when you click those, all of those handlers will get invoked (which gets you additional elements).

One approach is to take care what you add your click handler to. Only add it to the newly loaded elements.

Another, easier approach is to take advantage of the power of jQuery’s on() method. If you write it like this:

$('#fileNavi').on('click', '.file-tree a', function() {
  ...
});

and only once, the handler will work for current and any future elements that appear in your hierarchy. Then inside the handler just do the AJAX call and add the new data to the document, trusting jQuery to handle the events for you. Get rid of the loadNew function altogether, especially the deviant recursion you have going there.