Smarty：不能两次使用相同的模板

Question

I'm having the following Smary template (it's a file-tree, files are populated separately and then list_html is assigned to geberated file tree hrml)

<script>
    $("#directory-list-root").on("click", "div.content", function() {
        $("div.selected", "#directory-list-root").removeClass("selected");
        $(this).addClass("selected");

        // Check if directory is expanded
        var node = $(this).parent("li.directory");
        if (node.hasClass("expanded")) {
            node.removeClass("expanded");
            $(this).siblings("ul.container").hide();
        } else {
            node.addClass("expanded");
            $(this).siblings("ul.container").show();
        }
    } );
</script>

<div id="directory-list-root">
    <ul class="container" style="padding:5px" id="tree">
{$list_html}
    </ul>
</div>

In the code it's used twice (in jquery-ui dialogs that are shown one after another). And the problem is that for the first time handling function is OK, but for the second click-handler is not working. If I remove tree from the first dialog then handlers in the second are assigned.

Do you know how that can be fixed?

Thank you in advance!

PS. I'm running Smarty 3.1.13 if that matters.

Answer 1

If the template is used twice there will be two elements with the id directory-list-root in the document, which is illegal. The result is that things won't work.

Instead of using a fixed id, use a dynamic one by incrementing an internal counter variable each time, e.g. by using {counter}:

<script>
    $(function() {
        {counter name=tree assign=uniqueId}
        var $root = $("#directory-list-root-{$uniqueId}");

        $root.on("click", /* etc */);
    });
</script>

<div id="directory-list-root-{$uniqueId}">
    <ul class="container" style="padding:5px" id="tree">
{$list_html}
    </ul>
</div>