JavaScript не работает внутри загруженного AJAX DIV

У меня проблема с тем, что код javascript работает внутри загруженного div AJAX, я пытаюсь включить вкладки jquery, но он не работает, ajax выводит только текст и не распознает javascript. Любая помощь будет приятной.

Вот мой код 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});
}

И HTML:

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


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

Ответы

Ответ 1

Я не проверил весь ваш код, но что вы используете для запуска javacript, загруженного в ваш div? функции готовности окна/документа будут срабатывать только один раз, когда страница будет загружена первоначально...

Попробуйте сделать что-то вроде следующего для содержимого, загруженного в 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>

Обратите внимание, что тег script находится в конце, поэтому он будет проанализирован после загрузки вкладок.

Альтернативой было бы изменить функцию, вызванную при успешном выполнении AJAX, и добавить

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

до конца - снова это приведет к тому, что код будет запущен только после того, как содержимое будет загружено.

Ответ 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;
    });
});