单击按钮后更改 .innerHTML

Question

我正在使用 jquery 手机并且有一个可折叠的装置。

当使用一个函数来改变它的 innerHTML 时，它工作得很好。将里面的内容显示为可折叠的。

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

使用时有效： document.getElementById("doro").innerHTML ='<div data-role="collapsible"> <h3>Click me - Im collapsible!</h3> <p>I'm the expanded content.</p> </div>'

但是当我尝试时：

<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;  
}

它将我拥有的可折叠集更改为没有附加 jqueryMobile css 和 javascript 的文本。

看起来就是这样

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

<link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!doctype html>
<html><head>
    <title>My Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

   <div data-role="panel" id="left-panel" data-display="overlay"> 
    <h2></h2>
      <form id="checkuser" name="checkuser" method="post" class="ui-body ui-body-a ui-corner-all">
                <fieldset>
                    <div data-role="fieldcontain">
                        <label for="username">Enter your username:</label>
                        <input type="text" value="" name="username" id="username"/>
                    </div>                                  
                    <input type="button" data-theme="b" name="submit" id="submit" value="Submit" onClick="refreshPage();">
                </fieldset>
            </form>
     </div>
        <div data-role="header">
            <h1></h1>
        <a href="#left-panel" data-icon="gear" data-iconpos="notext">Add</a>
        </div><!-- /header -->

        <div data-role="content">
<a href="#" data-role="button" data-icon="star" data-theme="a">Star button</a>
<p id="demo">
<div id="doro" data-role="collapsibleset" data-iconpos="right" dir="rtl" align="right">
   <div data-role="collapsible">
        <h3>Click me - I'm collapsible!</h3>
        <p>I'm the expanded content.</p>
      </div>
 </div></p>
        </div><!-- /content -->

        <div data-role="footer">
            <h4>My Footer</h4>
        </div><!-- /footer -->

    </div><!-- /page -->
</body>
</html>

这是一个简化的示例，但效果不佳，我不明白为什么

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Collapsible Sets</h1>
  </div>

  <div data-role="main" class="ui-content" id="name">  </div>
<script>
 document.getElementById("name").innerHTML ='<div data-role="collapsibleset"><div data-role="collapsible"><h3>Click me - Im collapsible!</h3><p>Im the expanded content.</p></div>';
function refreshPage(){ document.getElementById("name").innerHTML ='<div data-role="collapsibleset"><div data-role="collapsible"><h3>Click me - Im collapsible!</h3><p>Im the expanded content.</p></div>';}
</script>
<input type="button" data-theme="b" name="submit" id="submit" value="Submit" onClick="refreshPage();">
  <div data-role="footer">
    <h1>Insert Footer Text Here</h1>
  </div>
</div> 

</body>
</html>

Answer 1

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

在容器元素上调用 .enhanceWithin()。

调用单独的小部件初始化器，例如.colapsibleset()、.collapsible() 等

对于您的示例，您可以执行以下操作。给定一个按钮和一个容器 DIV with id="name":

<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>

在pagecreate 上，将collapsibleset 动态添加到容器中并调用enhanceWithin()。还向调用 refreshPage() 的按钮添加点击处理程序。 refreshPage() 替换容器中的 html 并再次调用 enhanceWithin().

$(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();      
}

Working DEMO

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

单击按钮后更改 .innerHTML

Changing .innerHTML after a button is clicked

javascript

jquery

jquery-mobile