ajax .load 호출 후 javascript를 실행하는 데 문제가 발생했습니다.

Question

Jquery에 익숙하지 않아서 ajax .load() 호출을 통해 html 콘텐츠를로드 한 후 별도의 javascript 함수가 실행되도록 올바른 콜백 함수를 작성하는 데 문제가 있습니다. .

다음 코드는 내가 만드는 초과 컨텐츠를 삭제 한

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'); 
} 

다음 코드는 그 이전의 기능에 의해로드 된 HTML에서 실행해야 외부 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; 
    } 
}); 

로드 가능한 간결하게. 내가 알아야 할 것은 제 1 부 이후 파트 II를 실행하는 방법입니다. 귀하의 도움에 감사드립니다!

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

두 번째 인수는 요청이 완료 될 때 실행되는 콜백 함수입니다 :

Answer 1

난 당신이 찾고있는 생각합니다.

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을 클릭 한 다음 a 태그에 대해 href 속성이 무엇이든지로드 한 다음 2 단계 코드 인 콜백 함수를 수행하십시오. (.load() here)에 대해 더 자세히 읽을 수 있습니다.

var이 사용되지 않았기 때문에 귀하의 changePanels 기능에서 누락 된 부분이있을 수 있다고 생각하지만 쉽게 정리할 수 있습니다.