Javascript 单击按钮后更改.innerHTML

我正在使用jquery mobile，有一个可折叠的集合

当使用函数更改其内部HTML时，它工作正常。将内部内容显示为可折叠文件

<div id="doro" data-role="collapsibleset" data-iconpos="right" dir="rtl" align="right">
</div>

使用以下各项时有效：

document.getElementById（“doro”）.innerHTML='1〕
点击我-我是可折叠的！
我是扩展内容

“

但当我尝试时：

<input type="button" data-theme="b" name="submit" id="submit" value="Submit" onClick="refreshPage();">

而：

function refreshPage(){
  var text = "<div data-role='collapsible'><h1>Click me - I'm collapsible!</h1><p>I'm the expanded content.</p></div>";
  document.getElementById("doro").innerHTML = text;  
}

函数刷新页面（）{
var text=“单击我-我是可折叠的！我是扩展内容。
”；
document.getElementById（“doro”）.innerHTML=text；
}

它将我拥有的可折叠集更改为文本，而不附带jqueryMobile css和javascript

这就是它看起来的样子

函数刷新页面（）
{
var text=“单击我我是新的扩展内容。
”；
document.getElementById（“doro”）.innerHTML=text；
}

我的页面
输入您的用户名：
        

点击我-我是可折叠的！
我是扩展内容

我的页脚

这是一个简单的例子，不会很好地工作，我不明白为什么

可折叠集
document.getElementById（“名称”）.innerHTML='Click me-Im可折叠 我是扩展的内容。
'；
函数refreshPage（）{document.getElementById（“name”）.innerHTML='Click me-Im可折叠！Im扩展内容。
'；}
在此处插入页脚文本

当您在页面增强后动态创建jQuery mobile小部件时，您必须通过以下方式之一自己初始化小部件：

调用容器元素

调用单个小部件初始化器，例如.colapsibleset（），.collapsible（）等

例如，您可以执行以下操作。给定一个按钮和一个id为=“name”的容器DIV：

可折叠集

在pagecreate上，动态地将可折叠集添加到容器中，并调用enhanceWithin（）。还向调用refreshPage（）的按钮添加一个单击处理程序。refreshPage（）替换容器中的html，并再次调用enhanceWithin（）

$（document）.on（“pagecreate”，“pageone”，function（））{
$（“#name”）.html（'单击我-我是可折叠的！Im扩展内容。
'）。enhanceWithin（）；
$（“#提交”）。在（“单击”，函数（）{
刷新页面（）；
});
});
函数刷新页面（）{
var text='单击我-Im可折叠2！Im从按钮展开的内容。
'；
$（“#name”）.html（text）.enhanceWithin（）；
}

工作

---

另外，在第二个代码段中，您正在加载两个不同版本的jQuery。使用2.1或1.11，但不能同时使用。

stackoverflow上的Welkom。当您提出问题时，请在JSFIDLE或其他平台上提供示例代码，这使我们更容易检查。：）看起来您在div上没有所有正确的属性。如果您使用canTry fiddle，请使用jsfiddle。我已经粘贴了上面给出的代码。你的提琴不起作用，它确实改变了innerHTML，但并没有使它成为一个新的可折叠文件。我注意到，在使用setTimeout属性时，第一个innerHTML改变发生在页面加载之前，这就是为什么它变成了一个手风琴。而第二个发生在某个事件之后，因此它的风格不是手风琴。不管怎样，过去了吗？

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Collapsible Sets</h1>
  </div>
  <div data-role="main" class="ui-content" >  
      <input type="button" data-theme="b" name="submit" id="submit" value="Submit" />    
    <div id="name"></div>
  </div>
</div> 

$(document).on("pagecreate", "#pageone", function(){

    $("#name").html('<div data-role="collapsibleset"><div data-role="collapsible"><h3>Click me - Im collapsible!</h3><p>Im the expanded content.</p></div>').enhanceWithin();


    $("#submit").on("click", function(){
        refreshPage();
    });
});


function refreshPage(){
    var text = '<div data-role="collapsibleset"><div data-role="collapsible"><h3>Click me - Im collapsible 2!</h3><p>Im the expanded content from button.</p></div>';

    $("#name").html(text).enhanceWithin();      
}