在 PHP 的 innerHTML 之后运行 Javascript 函数答案

【问题标题】：Run Javascript function after innerHTML from PHP在 PHP 的 innerHTML 之后运行 Javascript 函数
【发布时间】：2017-02-15 19:18:37
【问题描述】：

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

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

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

问题是，如何解决这个问题？也许我没有正确调用javascript，调用函数的正确方法是什么？我已经测试了使用 javascript 函数创建脚本元素（alert 函数工作正常），我也使用了 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" ]
    });
});

谢谢！

【问题讨论】：

两个明显的问题：1）您在现有的 id 为“treeviewer”的元素中注入了第二个 id 为“treeviewer”的元素。 ID 必须是唯一的。 2）假设您所指的 js 函数是 jstree_charge.js 中的函数，该函数仅在页面加载时运行一次（这就是它的 document.ready() 包装器所做的）。下载新内容后必须再次运行jstree函数，否则它不知道新内容。
你是对的！ 1.-行：document.getElementById("treeviewer").innerHTML = this.responseText;确定将要注入的位置，这就是我引用 id 标签的原因。所以代码被正确地注入到指定的标签中。 2.-页面加载后脚本正在运行，这就是它不收取js文件费用的原因。下载内容后如何运行jstree函数？

标签： javascript php jquery html innerhtml

【解决方案1】：

你需要做两件事：

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。

【讨论】：

【解决方案2】：

简短的回答是：在设置 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?

【讨论】：