jquery執行得太快

我對jQuery有一些問題。代碼工作正常，但運行速度過快，甚至在整個$ .document（ready）事件中。jquery執行得太快

本質上，我有一個從數據庫中加載的數據層 - 然後將.sortable應用於它。

.sortable的東西正在應用HTML完成繪圖之前。有任何想法嗎？

下面標記的區域是問題所在。/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>

來源

2009-12-25 Ciel

這不是一個快速的問題，這是一個什麼時候的問題。即使您的代碼需要5年時間才能執行，您仍然會遇到同樣的問題：執行代碼時沒有做任何事情;一切發生在之前或之後。 – 2009-12-25 19:03:35

您可以使用$.load的回調參數，以EXCUTE的sortable方法的HTML後，已經注入到DOM：

$("#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(); 
    });

來源

2009-12-25 19:02:55 CMS

這工作非常好！ – Ciel 2009-12-25 19:08:11

這太棒了。這已經擴展了我對jQuery的知識，我不敢相信這是多麼有用。它消除了我在其他JavaScript之前運行的jQuery遇到的很多問題。絕對獨創！謝謝你，所以，非常感謝你的幫助。 – Ciel 2010-01-03 17:52:03

不客氣Stacey！我很樂意提供幫助！ – CMS 2010-01-03 19:45:36

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>

來源

2009-12-25 19:07:57

我不知道你是誰，但我也愛你。 – Ciel 2010-01-03 17:51:17

jquery執行得太快

回答

相關問題