JavaScript, AJAX yüklü DIV içinde çalışmaz

Question

Bir javascript kodu AJAX yüklü div içinde çalışmak için bir sorun yaşıyorum, jquery sekmeleri dahil etmeye çalışıyorum ama çalışmıyor, ajax sadece metin çıktılar ve javascript. Herhangi bir yardım güzel olurdu.

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

Ve HTML: Bütün kodunuzu kontrol etmedim ama sen div yüklenen javacript tetiklemeye kullanarak ne

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


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

Answer 1

İşte

benim js kodu nedir? sayfa ilk yükleme zamanında hazır fonksiyonlar sadece bir kez ateş edeceği pencere/belge ...

div yüklenen içerik için aşağıdaki gibi bir şey deneyin ...

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

Not komut dosyası etiketi sonunda, sekmeler yüklendikten sonra ayrıştırılacaktır. Yine bu Kodun içeriği yüklenmiş edildikten sonra çalışır hale getirecek -

alternatif AJAX başarılı olduğunda denilen işlevini değiştirebilir ve buna sonuna kadar

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

eklemek olacaktır.

Answer 2

JQuery'yi zaten kullandığınızdan, daha okunaklı ve dolayısıyla daha fazla bakım gerektirecek şekilde yeniden yapılandırmaya başlamalısınız. Özellikle, söz konusu yük fonksiyonu hendek ve buna benzer bir desen dahil edebilirsiniz:

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