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

Question

У меня проблема с тем, чтобы заставить код javascript работать внутри загруженного 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>

Answer 1

Я не проверил весь ваш код, но что вы используете для запуска JavaScript, загруженного в ваш 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();

Lorem ipsum dolor sit amet, посвященный адептированию elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, посвященный адептированию elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, посвященный адептированию elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, посвященный адептированию elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, посвященный адептированию elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

$ ( "#") Вкладки Вкладки ().

Обратите внимание, что тег 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;
    });
});

Answer 3

Я думаю, вам нужно это: Попробуйте выполнить скрипт с jquery, а не с innerHTML :

Вместо этого:

document.getElementById("content").innerHTML="<script>alert();</script>";

Попробуйте это:

$("#content").html("<script>alert();</script>");