Question

我对某些jquery有点问题。代码工作正常，但它运行得太快，甚至在整个$ .document（准备好的）内部。

基本上，我从数据库加载了一层数据 - 然后将.sortable应用于它。

在HTML完成绘制之前，正在应用.sortable内容。有什么想法吗？

下面标记的区域是问题所在。 / Clouds / List是ASP.NET MVC中的ActionResult，它获取列表并绘制局部视图 - 但是这需要比jQuery执行更长的时间。

<script type="text/javascript">
    $(function () {
        $("#floating").load("/Tags/List");
        **$("#listing").load("/Clouds/List");**

        $(".sortable").sortable({
            connectWith: '.connectable',
            dropOnEmpty: true,
            receive: function (event, ui) {
                var tag = $(ui.item).attr("id").replace(/t/, "");
                var parent_id = $(ui.item).parent().attr('id');
                $.post("/Clouds/Insert", { cloud: parent_id, tag: tag });
            },
            remove: function (event, ui) {
                var tag = $(ui.item).attr("id").replace(/t/, "");
                var parent_id = $(ui.item).parent().attr('id');
                $.post("/Clouds/Remove", { cloud: parent_id, tag: tag });
            }
        }).disableSelection();

    });
</script>

Answer 1

您可以使用$.load的回调参数，在 HTML注入DOM后执行sortable方法：

$("#listing").load("/Clouds/List", function () { $(".sortable").sortable({ connectWith: '.connectable', dropOnEmpty: true, receive: function (event, ui) { var tag = $(ui.item).attr("id").replace(/t/, ""); var parent_id = $(ui.item).parent().attr('id'); $.post("/Clouds/Insert", { cloud: parent_id, tag: tag }); }, remove: function (event, ui) { var tag = $(ui.item).attr("id").replace(/t/, ""); var parent_id = $(ui.item).parent().attr('id'); $.post("/Clouds/Remove", { cloud: parent_id, tag: tag }); } }).disableSelection(); });

Answer 2

JQuery的加载函数接受在收到响应时调用的回调。实际上，您可以确保在加载数据之前不会调用sortable。

<script type="text/javascript">
    $(document).ready( function () {
        $("#floating").load("/Tags/List");
        $("#listing").load("/Clouds/List", {}, function() {

            $(".sortable").sortable({
                    connectWith: '.connectable',
                    dropOnEmpty: true,
                    receive: function (event, ui) {
                            var tag = $(ui.item).attr("id").replace(/t/, "");
                            var parent_id = $(ui.item).parent().attr('id');
                            $.post("/Clouds/Insert", { cloud: parent_id, tag: tag });
                    },
                    remove: function (event, ui) {
                            var tag = $(ui.item).attr("id").replace(/t/, "");
                            var parent_id = $(ui.item).parent().attr('id');
                            $.post("/Clouds/Remove", { cloud: parent_id, tag: tag });
                    }
            }).disableSelection();
        });
    } );
</script>

jquery执行得太快了

2 个答案: