Question

我遇到了一个问题，即我正在尝试使用jQuery将一些html加载到页面上。

内容本身加载正常，但我想要做的是使用jquery ui使该内容“可拖动”。

我遇到的问题是，当我调用函数使内容可拖动时，它还没有加载，所以没有任何东西可以拖动。

我尝试了一些成功，在函数调用之前添加了一个setTimeout，这使它工作，但不是我喜欢它。 setTimeout不适用于慢速互联网连接，或者当网站加载缓慢时，因为它太低了。但如果我把它设置得太高，那么在内容可移动之前需要等待很长时间。

我想知道在调用函数之前是否有办法检测内容是否已加载？

我的代码：

  $(".naviitem").click(function(){     //When icon is clicked
    var i = $(this).attr('id');        //Get id of clicked icon
    $.when(load(i)).then(makeDrag());  //Load page then call makeDrag (Doesn't function properly)
  });


function load(i){

      $.get('wnd/' + i + '.htm', {}, function(data) {  //This all works
        var $response = $('<div />').html(data);
        var $load = $response.find('#p' + i);
        $('#page').append($load);
      },'html');
  }

 function makeDrag(){
      //does something here
  }

Answer 1

$.when(load(i)).then(makeDrag());

这应该是：

$.when(load(i)).then(makeDrag); // Note the lack of () after makeDrag

您需要将函数传递给.then，传递makeDrag()会传递该函数的结果，而不是函数本身。

另外，load应return $.get $.when才能正常工作。

function load(i){
      return $.get('wnd/' + i + '.htm', {}, function(data) {  //This all works
        var $response = $('<div />').html(data);
        var $load = $response.find('#p' + i);
        $('#page').append($load);
      },'html');
}

Answer 2

我的解决：

 function load(i, afterLoad){
   $.get('wnd/' + i + '.htm', {}, function(data) {  //This all works
      var $response = $('<div />').html(data);
      var $load = $response.find('#p' + i);
      $('#page').append($load);
      if(typeof afterLoad === 'function')  //<-- see it
         afterLoad();   
    },'html');  
  }

并使用它load(i, makeDrag)

Answer 3

你可以使用$（document）.ready（）..这会告诉你页面是否已经加载

加载'get'后的jQuery调用函数

3 个答案: