0

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

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

为什么是这样？有什么我可以解决的吗？

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

索引.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);
    }
}

解析器.php

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

2 回答 2

1

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

您可能必须在加载新内容后重新运行脚本（这可能会或可能不会起作用），或者找到使用实时 DOM 事件处理程序的更好的脚本。

于 2013-10-08T19:41:48.253 回答
0

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

httpReq.onload = function() {
    // Convert the result back into JSON
    var result = httpReq.responseText;
    document.getElementById("content").innerHTML = result;
    $("#content").collapse();
};
于 2013-10-08T19:49:20.843 回答