jquery - JavaScript not working inside AJAX loaded DIV - Stack Overflow

admin管理员组

文章数量:1194330

I am having a problem getting the javascript code to work inside an AJAX loaded div, I am trying to include jquery tabs but it not working, the ajax outputs text only and won't recognize the javascript. Any help would be nice.

Here is my js code:

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

And the HTML:

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


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

I am having a problem getting the javascript code to work inside an AJAX loaded div, I am trying to include jquery tabs but it not working, the ajax outputs text only and won't recognize the javascript. Any help would be nice.

Here is my js code:

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

And the HTML:

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


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

• javascript
• jquery
• ajax

Share Improve this question Follow edited Dec 16, 2017 at 16:07 yivi 47.3k1818 gold badges130130 silver badges153153 bronze badges asked Dec 18, 2010 at 1:21 ihabihab 15311 gold badge11 silver badge44 bronze badges 1

• 3 Just for info, it's JavaScript, not java script :) – dheerosaur Commented Dec 18, 2010 at 3:50

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 9

I haven't checked all your code but what are you using to trigger the javacript loaded into your div? the window/document ready functions will only fire once when the page is initially loaded...

Try the something like the following for the content loaded into the 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>

Note the script tag is at the end so it will be parsed after the tabs are loaded.

The alternative would be to modify the function called when AJAX is successful and add

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

to the end of it - again this will make sure the code runs only after the contents have been loaded.

Since you are already using jQuery, you should start refactoring that to be more readable and therefore more maintainable. Notably, you can ditch that load function, and incorporate a pattern similar to this:

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

I think you need this : Try executing script with jquery rather than with innerHTML :

Instead of this :

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

Try this:

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

本文标签： jqueryJavaScript not working inside AJAX loaded DIVStack Overflow