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 /导航部分（表格是应该显示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

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

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

Answer 2

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

修改

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

例如：

$（“＃YOUR_DIV_ID”）。html（“您的内容在这里......”）;

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支持至关重要，否则我建议您尝试jQuery AJAX，它支持IE6 +。

一旦div中的内容发生更改，就会在页面中重新加载javascript

4 个答案: