jquery执行得太快了

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

在将HTML注入DOM 后$.load,可以使用for 的回调参数来执行该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();
   });