更改 div 中的内容后，在页面中重新加载 javascript

Question

这就是我的应用程序的工作方式。

我有一个导航栏，一旦我单击导航栏中的链接，页面的一个特定部分 (div) 将更改其内容 (ajax)。大部分内容是图形和表格，并使用 css 和 javascript。问题是，每当我单击链接时，都不会显示/使用 js 的效果。我认为每次更改 div 的内容时都应该重新加载 js。我该怎么做？

这是脚本。

<script>
    function loadTable(logtype)
    {
        var xmlhttp;
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            {
                document.getElementById("tables").innerHTML=xmlhttp.responseText;
                }
        }

        if (logtype == "XXX")
        {
            xmlhttp.open("GET","/con/chartUI",true);
        }

        xmlhttp.send();



    }
</script>  

html/导航部分 （tables 是应该显示 na 图表和图形的 div 的 id）

<div class="nav-collapse sidebar-nav">
                            <ul class="nav nav-tabs nav-stacked main-menu">
                                <li>
                                    <a class="dropmenu" href="#"> <font color="#6666FF">System</font> </a>
                                    <ul>
                                        <li><a class="submenu" href="#"><h2>&nbsp;&nbsp;&nbsp;&nbsp;Monitoring</h2></a></li>
                                    </ul>    
                                </li>
                                <li>
                                    <a class="dropmenu" href="#"><font color="#6666FF">Maintenance</font></a>
                                    <ul>
                                        <li>
                                            <a class="dropmenu" href="#"><h2>&nbsp;&nbsp;&nbsp;&nbsp;Logs</h2></a>
                                            <ul>
                                                <ul><a class="submenu" href="#" onClick="loadTable('XXX')"><h3>Option 1</h3></a></ul>
                                                <ul><a class="submenu" href="#" onClick="loadTable('XXX')"><h3>Option 2</h3></a></ul>
                                                <ul><a class="submenu" href="#" onClick="loadTable('XXX')"><h3>Option 3</h3></a></ul>
                                                <ul><a class="submenu" href="#" onClick="loadTable('XXX')"><h3>Option 4</h3></a></ul>
                                            </ul>
                                        </li>
                                    </ul>    
                                </li>
                            </ul>
                        </div>

Answer 1

您可以在更新 DIV 内容后使用window.location.reload();。

编辑：

如果您使用 Javascript/JQuery(AJAX) 更新您的 DIV 内容，则无需重新加载页面。我希望您的最终要求可能是更新 DIV 内容。

例如：

$("#YOUR_DIV_ID").html("您的内容...");

Answer 2

如果您只想在检索到内容后调用一些 javascript 函数，请使用

  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        // play with xmlhttp.responseText; 
        then call your javascript functions here
    }}

Answer 3

因为您的 div 将通过 Ajax 调用进行更新。我认为您可以在完成对 div 内容的操作后，在 ajax 调用的回调中重新加载 javascript。

//reload script
var script = document.querySelectorAll('script[src=blabla.js]')[0]
script.parentNode.removeChild(script);

script = document.createElement('script');
script.type='text/javascript';
script.src='blabla.js';

document.head.appendChild(script);

Answer 4

您是否尝试过使用 console.log() 进行调试？请求是否真正被发送（Chrome 的网络标签非常适合监控）？

我对您的代码结构感到有些困惑。 responseText 仅针对 IE5 和 6 进行处理，并且您尝试在发送请求之前执行此操作。这是来自 MDN 的an example usage。 reqListener 回调是动作发生的地方。

function reqListener () {
  console.log(this.responseText);
}

var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.open("get", "yourFile.txt", true);
oReq.send();

除非必须支持 IE5，否则我建议尝试支持 IE6+ 的jQuery AJAX。