JavaScript nie działa w załadowanym AJAX DIV

Question

Mam problem z uzyskaniem kodu javascript do pracy wewnątrz ładowanego div AJAX, próbuję dołączyć tabulatory jquery, ale to nie działa, ajax wyświetla tylko tekst i nie rozpoznaje javascript. Każda pomoc się przyda.

Oto mój kod JS:

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

I HTML:

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


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

Answer 1

nie sprawdzili cały swój kod, ale co używasz do uruchomienia javacript załadowany do div? okno/dokument funkcje gotowe będą uruchamiane tylko raz, gdy strona jest wstępnie załadowany ...

Spróbuj coś jak następuje za treść załadowanego do dz ...

<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> 

Uwaga tag script jest na końcu, więc zostanie przeanalizowany po załadowaniu kart.

Alternatywą byłoby zmodyfikować funkcję zwaną gdy AJAX jest udany i dodać

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

do końca to - znowu będzie to upewnij się, że kod jest uruchamiany dopiero po zawartość zostały załadowane.

Answer 2

Ponieważ już używasz jQuery, powinieneś rozpocząć refaktoryzację, która będzie bardziej czytelna, a przez to łatwiejsza w utrzymaniu. Warto zauważyć, że można porzucić tę funkcję ładowania i wprowadzenie wzór podobny do tego:

$(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; 
    }); 
});