运行 Javascript 函数在 PHP 的 innerHTML 之后

Question

我正在使用 xmlhttp.send() 获取查询结果，该查询结果在 中打印 HTML 分层列表（li ans lu 标签） PHP (jstree_view.php)。

之后，我使用document.getElementById("treeviewer").innerHTML = this.responseText;注入从PHP获得的结果，以向用户显示信息。

我注意到 javascript 函数在注入代码后无法显示 jstree，而且 jstree 函数在执行之前运行 innerHTML

问题是，如何解决这个问题？也许我没有正确调用 javascript，调用该函数的正确方法是什么？我已经测试过使用 javascript 函数创建一个脚本元素（警报函数工作正常），我还使用 eval() 作为一些建议的答案，结果很好。

jstree_charge.js

function jstree_charge(tech) {
var index_project_database= document.getElementById("project_select").selectedIndex;
var project_database= document.getElementById("project_select").options[index_project_database].value;

if (tech == "") {
    document.getElementById("treeviewer").innerHTML = "";
    return;
} else {
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("treeviewer").innerHTML = this.responseText;
            }
    };

    xmlhttp.open("GET","../php/jstree_charge.php?tech=" + tech + "&project=" + project_database, true);
    xmlhttp.send();     
}  }

jstree_charge.php的结果这是innnerHTML在jstree_charge.js

注入的结果

<div name="treeviewer" id="treeviewer">
    <ul>
        <li>RNC5
            <ul>
                <li>00AB2_U
                    <ul>
                        <li>P00AB2A</li>
                        <li>P00AB2B</li>
                        <li>P00AB2C</li>
                        <li>P00AB2D</li>
                        <li>P00AB2E</li>
                    </ul>
                </li>
                <li>00ABC
                    <ul>
                        <li>U00ABCA</li>
                        <li>U00ABCB</li>
                        <li>U00ABCC</li>
                    </ul>
                </li>
           </ul>
        </li>
   </ul>
</div>

jstree_charge.js

    $(document).ready(function(){
    $("#treeviewer").jstree({

        "checkbox" : {
        "keep_selected_style" : false
        },
        "plugins" : [ "checkbox" ]
    });
});

谢谢！

Answer 1

简短的回答是：在设置 innerHTML 之后将您的 jsTree 函数移动到运行，以便 responseText 准备就绪：

xmlhttp.onreadystatechange = function() {
       if (this.readyState == 4 && this.status == 200) {
           document.getElementById("treeviewer").innerHTML = this.responseText;
           $("#treeviewer").jstree({
               "checkbox" : {
                   "keep_selected_style" : false
               },
               "plugins" : [ "checkbox" ]
           });
       }
};

长答案在这里：How do I return the response from an asynchronous call?

Answer 2

你需要做两件事：

1) 你的 jsTree 函数需要在你的数据被 ajax 加载后再次运行:

xmlhttp.onreadystatechange = function() {
   if (this.readyState == 4 && this.status == 200) {
       document.getElementById("treeviewer").innerHTML = this.responseText;
       $("#treeviewer").jstree({
           "checkbox" : {
               "keep_selected_style" : false
           },
           "plugins" : [ "checkbox" ]
       });
   }
};

2) 您需要稍微更改一下您的回复。您说的回复包括：

<div name="treeviewer" id="treeviewer">...</div>

但是，您的页面中已经有了这个元素 - 这是您注入新响应文本的地方。 "innerHTML" 函数替换目标元素内的内容，而不是元素本身。因此，您最终会得到这样的布局：

<div name="treeviewer" id="treeviewer">
  <div name="treeviewer" id="treeviewer">
    <ul>...etc</ul>
  </div>
</div>

这是无效的 HTML - 不能有多个具有相同 ID 的元素。它可能会导致 jsTree 函数无法按预期工作。

因此您需要从 jstree_charge.php 生成的响应中删除 "treeviewer" div。

运行 Javascript 函数在 PHP 的 innerHTML 之后

Run Javascript function after innerHTML from PHP

html

javascript

php

jquery

innerhtml