javascript - JQuery可折叠Div仅在第一次正确显示

嗨，我有一个简单的可折叠div，它是用js这样的函数创建的：

function createColDiv() {
  return '<div data-role="collapsibleset" data-theme="a" data-content-theme="a">' +
    '<div data-role = "collapsible">' +
    '<h2>Sub0001</h2>' +
    '</div>' +
    '</div>';
}

这是在另一个函数中完成的，该函数创建一个出现在可折叠div之前的表，如下所示：

function build() {
  var windowContent = '<table id="tabellaGallery" class="ui-body-d ui-shadow ui-responsive table-stripe" data-column-btn-theme="b" style="width:100%; margin:0px; border:0px solid black; border-collapse: collapse;">' +
  '<tr style="text-align: center; border-bottom: 1px solid #AFAFAF" ><td align="center" style="text-align: center; font-weight: bold" colspan="2">Table Title</td></tr>' +
  '<tr class="bb" style="vertical-align: middle;min-width: 150px;padding-left:0.3em">' +
            '<td style="vertical-align: middle;min-width: 150px;padding-left:0.3em">Data di nascita</td>' +
            '<td align="right" style="vertical-align: middle; padding-left:0.5em;padding-right:0.4em">14091947</td>' +
  '</tr>' +
  '<tr class="bb" style="vertical-align: middle;min-width: 150px;padding-left:0.3em">' +
            '<td style="vertical-align: middle;min-width: 150px;padding-left:0.3em">Luogo di nascita</td>' +
            '<td align="right" style="vertical-align: middle; padding-left:0.5em;padding-right:0.4em">L378</td>' +
  '</tr>' +
  '</table>' +
  createColDiv();

  $('#myPage').html(windowContent);
}

然后，我用$('#myPage').html(windowContent);将所有html添加到页面中。问题是，第一次进入该页面时，我可以正确地看到可折叠的div，如下所示：



但是，如果我再次输入，我会看到这样的“可折叠div”：



它甚至不再是按钮，而是纯文本。.我做错了什么？

最佳答案

看来您正在使用jQuery Mobile。

如果是这样，则在加载页面时，脚本（jquery-ui）“读取”元素的属性（按钮，列表等）并通过它们添加类。

如果仅添加html标记，则需要脚本再次运行并“尽其所能”。

如果到目前为止我是对的，请阅读以下问题：Dynamically Add Buttons Via JQuery Mobile

简而言之，您必须运行以下命令：（例如，在按钮上）

$("your_button_selector").button().button('refresh');

关于javascript - JQuery可折叠Div仅在第一次正确显示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32331579/