Question

I am trying to get JsTree to work to get a folder view in my MVC application. Everything works fine if I use existing static html ul list in the page view. But I need to get the ul list dynamically, so I am trying the ajax call for JsTree described in the documentation:

<script type="text/javascript">
        var url;
        $(document).ready(function () {
            $("a").click(function () {
                url = "?url=" + $(this).attr("rel");
                alert(encodeURI(url));
            });
        });

        $(function () {

            $("#demo2").jstree({
                "html_data": {
                    "ajax": {
                        "url": "/Home/Directories/"
                    }
                },
                "ui": {
                    "select_limit": 2,
                    "select_multiple_modifier": "alt",
                    "selected_parent_close": "select_parent",
                    "initially_select": ["phtml_2"]
                },
                "themes": {
                    "theme": "classic",
                    "dots": true,
                    "icons": true
                },
                "plugins": ["themes", "html_data", "ui"]
            });
        });

    </script>

As you can see, I am trying to have a click event set on all “a” elements for this list. Again, this works fine if the ul list is written directly in the div id=”demo2″. But when I try to get the list dynamically the click event on these dynamically created a elements does not work. Nothing happens. I have checked the result html, and everything is fine as far as I can see. It’s as if the click event is not set because the dynamic a elements don’t exist when the click event is set, could that be it? If so, what can I do about this? I need to be able to trigger events on the dynamically created a elements… I have looked in the JsTree documentation, but it is rather thin, basically just listing events and so on, not showing how to use them. I guess if I could have a callback so that the click event is set only after the tree had been created that would make it work, but I can’t figure out how to write a callback for this. (I am very new to jquery and way in over my head with this script, but I need it so I am trying to learn as I go along).

Answer 1

Actually, I found the answer myself by struggling a bit more with the documentation! I suspect the docs will be easier to understand once I know a bit more about jQuery as a whole… Anyway, if anyone else is interested, this is what I had to do to bind the event so that it triggers when the tree is created:

    $("#demo2")
        .bind("loaded.jstree", function () {
            $("a").click(function () {
                url = "?url=" + $(this).attr("rel");                    
                alert(encodeURI(url));
            });
        }).jstree(//...[the rest of the function the same as before]...