MVC中JsTree jQuery插件中的Ajax调用

发布于 2024-09-15 06:23:08 字数 1487 浏览 8 评论 0原文

我正在尝试让 JsTree 工作以在我的 MVC 应用程序中获取文件夹视图。如果我在页面视图中使用现有的静态 html ul 列表,一切都会正常工作。但我需要动态获取 ul 列表,因此我正在尝试文档中描述的 JsTree 的 ajax 调用:

<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>

如您所见,我正在尝试在此列表的所有“a”元素上设置单击事件。同样,如果 ul 列表直接写在 div id="demo2" 中,则效果很好。但是,当我尝试动态获取列表时,这些动态创建的元素上的单击事件不起作用。什么也没发生。我检查了结果 html,据我所知一切都很好。就好像没有设置click事件是因为设置click事件时动态a元素不存在,会是这样吗?如果是这样,我该怎么办?我需要能够在动态创建的元素上触发事件...我查看了 JsTree 文档,但它相当薄,基本上只是列出事件等,没有显示如何使用它们。我想如果我可以有一个回调,以便仅在创建树之后设置单击事件,这将使其工作,但我不知道如何为此编写回调。 (我对 jquery 很陌生,并且对这个脚本很陌生,但我需要它,所以我正在努力学习)。

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).

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

愛上了 2024-09-22 06:23:08

事实上,我自己通过对文档进行了更多的努力找到了答案!我怀疑一旦我对 jQuery 整体有了更多的了解,这些文档就会更容易理解...无论如何,如果其他人感兴趣,这就是我必须做的来绑定事件,以便它在树被触发时触发创建:

    $("#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]...

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]...
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文