Question

我有一个可折叠的DIV，只需点击一下按钮，我就可以重新创建HTML来创建一个不同的可折叠DIV。但是，我创建的第二个DIV不可折叠。

您可以在http://jsfiddle.net/Shinksy/SfcTk/7/

中看到此问题

单击搜索按钮，您将看到可折叠的DIV，单击“消息”按钮，然后还应创建可折叠的DIV。但是，它不再可折叠。

非常感谢任何帮助。

由于

马丁

Answer 1

点击搜索时调用这两个功能。它会工作 - JS -

//Set global variables
var newData = "";
var statusReport = "X";
var innerHtml = "";
var defaultHTML = "";


//Handle Search
$("#idoc_search").click(function() {
    requestProcessedSearch();
});

function changePage() {
    $.mobile.changePage("#results_page", {})
}

function requestProcessedSearch() {

    document.getElementById('resultTable').innerHTML = "";

    defineNewStatusDiv();

    defineNewMessageDiv();//Call function here

    changePage();

}

function defineNewStatusDiv() {

    innerHtml = null;
    defaultHTML = null;        

    innerHtml = document.getElementById('resultTable').innerHTML;

    defaultHTML = '<div data-role="collapsible" data-theme="a" data-content-theme="a" id="status">' + '<h3>Status</h3>' + '<table id="chart' + '51' + '" class="imagetable">' + '<tr>' + '<th>IDoc</th>' + '<th>Message Type</th>';

    alert(defaultHTML);

    innerHtml = innerHtml + defaultHTML;

    document.getElementById('resultTable').innerHTML = null;

    document.getElementById('resultTable').innerHTML = innerHtml;

}

function defineNewMessageDiv() {

    innerHtml = null;
    defaultHTML = null;

    innerHtml = document.getElementById('resultTable').innerHTML;

    defaultHTML = '<div class = "ui-collapsible ui-collapsible-collapsed" data-role="collapsible" data-theme="a" data-content-theme="a">' + '<h3>Message</h3>' + '<table id="chart' + 'MATMAS' + '" class="imagetable">' + '<tr>' + '<th>IDoc</th>' + '<th>Status</th>';

    innerHtml = innerHtml + defaultHTML;

    document.getElementById('resultTable').innerHTML = null;

    document.getElementById('resultTable').innerHTML = innerHtml;

}

这是小提琴 - http://jsfiddle.net/SfcTk/11/

PS-您可以使用Jquery appendTo 而不将DOM设为NULL。

Answer 2

你走了：jsFiddle
我已更新＆＃39;您的代码应该使用jQuery。

您的第二个可折叠div不可折叠的原因是，您生成的html代码未由jQuery初始化。对于第一个，这是在changePage调用（我猜，不熟悉jQuery-mobile）完成的，第二个只是将innerHtml替换为包含一些无用的{{1}的html如果没有初始化类！

我所做的是初始化两个可折叠的css，每个在实际div之前的单独的results-div-container中，当点击消息按钮时，我隐藏第一个并显示第二个（这是隐藏在初始化），简单！

观看代码，看看使用changePage操作jQuery与初始帖子相比有多容易！

重新创建HTML代码后，JQuery Collapsible DIV失去了功能

2 个答案: