Неисправность, выполняющая javascript после ajax .load call

Question

У меня нет большого опыта с JQuery, и у меня проблемы с записью надлежащей функции обратного вызова, так что отдельная функция javascript выполняется после загрузки содержимого html через вызов ajax .load() ,

Следующий код загружает внешнее содержимое HTML

$('#myID').find('a').on('click', function(){ 
    e.preventDefault(); 
    var $desc = $('#insert'); 

    switch($(this).attr('href')) { 
     case 'content1.html' : 
      $desc.load('fragments/content1.html'); 
      break; 
     case 'content2.html' : 
      $desc.load('fragments/content2.html'); 
      break; 
    } 
}); 

Следующий код должен затем быть выполнен на HTML, нагруженного предыдущей функцией

var panelWidth = 0; 
var startPanel = 1; 

window.panelWidth = $('.sp').width(); 


$('.panel_container .hiw_panel').each(function(index){ 
    $(this).css({'width':window.panelWidth+'px','left':(index*window.panelWidth)}); 
    $('.sp .panels').css('width',(index+1)*window.panelWidth+'px'); 
}); 


$('.switcher span').each(function(){ 
    $(this).on('click', function(){ 
     changePanels($(this).index()); 
    }); 
}); 


function changePanels(newIndex){ 

var newPanelPosition = (window.panelWidth * newIndex) * -1; 
$('.switcher span').removeClass('selected'); 
} 

Я удалил лишнее содержание, чтобы сделать это как можно более кратким. Все, что мне нужно знать, - это выполнить часть II после части I. Спасибо за вашу помощь!

Answer 1

Я думаю, что вы ищете:

$desc.load('fragments/content1.html', function(){ 
    //cb code here 
}); 

Второй аргумент функции обратного вызова, который выполняется, когда запрос завершается.

Answer 2

Дайте функции имя - например executeAfterLoad() - и включить его в качестве argument of .load:

case 'content1.html' : 
     $desc.load('fragments/content1.html',executeAfterLoad); 
     break; 
case 'content2.html' : 
     $desc.load('fragments/content2.html',executeAfterLoad); 
     break; 

Answer 3

Хм, что-то вроде этого, может быть:

$('#myID').on('click', 'a', function(e) { 
    e.preventDefault(); 

    $('#insert').load($(this).attr('href'), function() { 
     var panelWidth = 0; 
     var startPanel = 1; 

     window.panelWidth = $('.sp').width(); 

     $('.panel_container .hiw_panel').each(function(index) { 
      $(this).css({ 
       'width': window.panelWidth, 
       'left': (index * window.panelWidth) 
      }); 

      $('.sp .panels').css({ 
       'width': (index + 1) * window.panelWidth 
      }); 
     }); 

     $('.switcher span').each(function() { 
      $(this).bind('click', function() { 
       changePanels($(this).index()); 
      }); 
     }); 
    }); 
}); 

function changePanels(newIndex) { 
    var newPanelPosition = (window.panelWidth * newIndex) * -1; 
    $('.switcher span').removeClass('selected'); 
} 

Что он делает это связывание с a щелкните, а затем загрузите все атрибуты href для тега a, а затем выполните функцию обратного вызова, которая является кодом вашего шага 2. (Вы можете узнать больше о .load() here);

Я думаю, что что-то может отсутствовать в вашей функции changePanels, так как var не используется, но это легко привести в порядок.