【问题标题】:Adding JQuery to content loaded with AJAX将 JQuery 添加到使用 AJAX 加载的内容
【发布时间】:2011-10-21 04:24:27
【问题描述】:

我刚刚了解到您可以使用 live() 而不是 bind() 来确保在使用 AJAX 重新加载内容后仍然存在事件处理程序...但是我可以使用其他添加的 JQuery 做什么,例如 .sortable() ?我有一个 UL 需要在排序或添加后重新加载;但是在 AJAX 重新加载之后,排序就不太正常了...

它并没有完全失去可排序性,但拖动变得更加困难;它会跳来跳去,似乎会切换其他两个部分,这不是我要拖动的部分。这仅在部分重新加载后发生;我的猜测是,当它重新加载时,我需要重新附加可排序的......我该怎么做?这是我的代码:

$("#sections").sortable({
                start: function (event, ui) {
                    startIndex = ui.item.index();
                },
                update: function (event, ui) {
                    $.ajax({
                        type: "POST",
                        url: "/Form/sortSections",
                        data: {
                            formID: '@(Model.formID)',
                            displayOrder: ui.item.index() + 1,
                            sectionID: $(ui.item).attr("id"),
                            startDisplayOrder: startIndex + 1
                        },
                        success: function (result) {
                            $.get("/Form/_AllSections/@(Model.formID)", function (data) {
                                $("#sections").html(data);
                            });
                        },
                        error: function (req, status, error) {
                            alert(error);
                        }
                    });
                }
            });

【问题讨论】:

    标签: ajax jquery-ui jquery jquery-ui-sortable


    【解决方案1】:

    load 事件与live() 一起使用,以便每次将元素添加到DOM 时它都会运行。

    http://api.jquery.com/load-event

    【讨论】:

    • 在开始实施您的解决方案时,我发现了实际问题......我的 AJAX 获取的是返回整个 UL,而不仅仅是列表项。因此,我随后将该 UL 添加到 #sections UL...,这导致 HTML 无效的方式不止一种。无效的 HTML 一定是与 #draggable 搞砸了。谢谢你的建议;我确定我以后需要使用.live('load', function())
    猜你喜欢
    • 2018-10-14
    • 2021-03-21
    • 1970-01-01
    • 2023-03-09
    • 2011-06-17
    • 2013-08-06
    • 1970-01-01
    • 2014-08-17
    • 2012-03-24
    相关资源
    最近更新 更多