Функция вызова jQuery после загрузки 'get'

Question

У меня проблема с тем, что я пытаюсь загрузить html на страницу, используя jQuery.

Сам контент прекрасно загружается, но я пытаюсь сделать его «перетаскиваемым» с помощью 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 () .. это даст вам знать, была ли страница загружена или нет