JavaScript가 AJAX 내부에서 작동하지 않습니다. DIV

Question

AJAX가로드 된 div에서 작동하도록 자바 스크립트 코드를 가져 오는 중 문제가 발생했습니다. jquery 탭을 포함하려고하지만 작동하지 않습니다. 아약스는 텍스트 만 출력하고 인식하지 못합니다. 자바 스크립트. 어떤 도움이라도 좋을 것입니다.

var OpenedPage; 

function load(url, target) { 
    document.getElementById(target).innerHTML = 'Loading ...'; 
    if (window.XMLHttpRequest) { 
     req = new XMLHttpRequest(); 
    } else if (window.ActiveXObject) { 
     req = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    if (req != undefined) { 
     req.onreadystatechange = function() { 
      loadDone(url, target); 
     }; 
     req.open("GET", url, true); 
     req.send(""); 
    } 
} 

function loadDone(url, target) { 
    if (req.readyState == 4) { // only if req is "loaded" 
     if (req.status == 200) { // only if "OK" 
      document.getElementById(target).innerHTML = "loaded" + req.responseText; 
     } else { 
      document.getElementById(target).innerHTML = "Error:\n" + req.status + "\n" + req.statusText; 
     } 
    } 
} 

function unload() { 
    if (OpenedPage == "divsignin") { 
     unloaddivsignin(); 
    } 
    if (OpenedPage == "divHowto") { 
     unloaddivHowto(); 
    } 

} 

function ShowHidedivsignin() { 
    unload(); 
    OpenedPage = "divsignin"; 
    load("../slogin.php", "divsignin"); 
    $("#divsignin").animate({"height": "toggle"}, {duration: 800}); 
} 

function unloaddivsignin() { 
    OpenedPage = ""; 
    $("#divsignin").animate({"height": "toggle"}, {duration: 800}); 
} 

function ShowHidedivHowto() { 
    unload(); 
    OpenedPage = "divHowto"; 
    load("../howto.php", "divHowto"); 
    $("#divHowto").animate({"height": "toggle"}, {duration: 800}); 
} 

function unloaddivHowto() { 
    OpenedPage = ""; 
    $("#divHowto").animate({"height": "toggle"}, {duration: 800}); 
} 

그리고 HTML : 나는 모든 코드를 확인하지 않은하지만 당신은 당신의 사업부에로드 된 javacript을 실행하는 데 사용하고있는

<div id="divsignin" style="display:none;width:auto"> </div> 


<a onClick="ShowHidedivHowto(); return false;" href="#">help</a> 

Answer 1

여기

내 JS 코드? 페이지가 처음로드 될 때 준비 기능을 한 번만 실행됩니다 윈도우/문서 ...

이 사업부에로드 된 내용에 대해 다음과 같이 뭔가를 시도 ...

<div id="tabs"> 
    <ul> 
     <li><a href="#fragment-1"><span>One</span></a></li> 
     <li><a href="#fragment-2"><span>Two</span></a></li> 
     <li><a href="#fragment-3"><span>Three</span></a></li> 
    </ul> 
    <div id="fragment-1"> 
     <p>First tab is active by default:</p> 
     <pre><code>$('#example').tabs();</code></pre> 
    </div> 
    <div id="fragment-2"> 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
    </div> 
    <div id="fragment-3"> 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
    </div> 
</div> 
<script type="text/javascript"> 
    $("#tabs").tabs(); 
</script> 

주 스크립트 태그 끝 부분에 있으므로 탭이로드 된 후에 파싱됩니다. 다시 확실히 코드가 내용이로드 된 후에 만 ​​실행하게됩니다 -

대안은 AJAX가 성공하면 호출 한 함수를 수정하고 그것의 끝에

$("#tabs").tabs(); 

를 추가하는 것입니다.

Answer 2

이미 jQuery를 사용하고 있으므로 리팩토링을 시작하여보다 읽기 쉽고 유지 관리가 쉬워야합니다. 특히, 당신이 그로드 기능을 도랑,이 유사한 패턴을 통합 할 수 있습니다 :

$(document).ready(function() { 

    // <a class="help" href="help.html">help</a> 
    $("a.help").live("click", function() { 
     $("#divHowTo").html("Loading..."); 
     $.ajax({ 
      url: "../howto.php", 
      dataType: "html", 
      success: function(html) { 
       $("#divHowTo").html(html) 
        .animate({"height": "toggle"}, { duration: 800 }); 
      } 
     }); 
     return false; 
    }); 
});