Question

我正在使用jquery mobile并拥有可折叠的设置。

当使用函数更改其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（）等。

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

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

正在使用 DEMO

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

单击按钮后更改.innerHTML

1 个答案: