Question

基本上，我正在创建一个网站，我正在使用jQuery Collapse格式化一些元素。但是，这些元素是由PHP脚本生成的，并通过Javascript加载（见下文）。由于某种原因，加载的元素没有所需的可折叠性。

我已经确认只是将生成的元素放在静态HTML中可以解决问题，但我希望在运行时生成HTML代码。

这是为什么？我能做些什么来解决它吗？

谢谢！下面是我正在尝试做的代码示例

的index.html

...
<body onload="test()">
    <div id="content"> </div>
</body>
...

的javascript

function test(){
    // Create the request object
    var httpReq = (window.XMLHttpRequest) ? new XMLHttpRequest()
        : new ActiveXObject("Microsoft.XMLHTTP");

    // When it loads,
    httpReq.onload = function() {
        // Convert the result back into JSON
        var result = httpReq.responseText;
        document.getElementById("content").innerHTML = result;
    };

    // Request the page
    try {
        httpReq.open("GET", "parser.php?", true);
        httpReq.send(null);
    } catch (e) {
        console.log(e);
    }
}

parser.php

echo '<div data-collapse="accordion"><h1>Test title</h1><div>Collapsed content</div></div>';

Answer 1

脚本可能在加载时查看页面，因此添加的元素不会受到脚本的影响。

在加载新内容（可能有效或无效）之后，您可能不得不重新运行脚本，或找到使用实时DOM事件处理程序的更好的脚本。

Answer 2

加载内容后，您必须调用jQuery Collapse：

httpReq.onload = function() {
    // Convert the result back into JSON
    var result = httpReq.responseText;
    document.getElementById("content").innerHTML = result;
    $("#content").collapse();
};

HTML可折叠性不会通过PHP加载持续存在

2 个答案: