JavaScript no funciona dentro de AJAX cargado DIV

Question

Tengo un problema para obtener el código de JavaScript para trabajar dentro de un div cargado AJAX, estoy tratando de incluir pestañas jquery pero no funciona, el ajax solo emite texto y no reconocerá el javascript Cualquier tipo de ayuda sería buena.

Aquí está mi código 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}); 
} 

Y el HTML:

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


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

Answer 1

No he comprobado todo el código, pero lo está utilizando para desencadenar la javacript cargado en su div? la ventana/documento de funciones listas sólo disparar una vez cuando la página se carga inicialmente ...

Prueba el algo así como lo siguiente para el contenido cargado en el div ...

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

Nota la etiqueta script está al final, por lo que se analizará después de que se carguen las pestañas.

La alternativa sería modificar la función llamada cuando AJAX es exitosa y añadir

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

al final de la misma - de nuevo esto hará que el código se ejecuta sólo después de que el contenido ha sido cargado.

Answer 2

Dado que ya está utilizando jQuery, debe comenzar a refactorizarlo para que sea más legible y, por lo tanto, más fácil de mantener. En particular, puede deshacerse de esa función de carga, e incorporar un patrón similar a esto:

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