单击按钮后更改.innerHTML

我正在使用jquery mobile并具有可折叠的设置。单击按钮后更改.innerHTML

当使用一个函数来改变它的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>

来源

2015-04-01 Amit Zigelman

Welkom在stackoverflow上。当您提出问题时，请在jsfiddle或其他平台上提供示例代码，这使我们更容易检查。 :) – Jordumus 2015-04-01 13:16:21

看起来像你没有在div上的所有正确的属性。如果可以，请提供一个jsfiddle – user2879041 2015-04-01 13:28:21

什么是_text2_？ – 2015-04-01 13:28:42

Wh如果您在页面已经增强后动态创建jQuery移动小部件，则必须使用以下方法之一自行初始化小部件：

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

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

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

<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，但不能同时使用。

来源

2015-04-01 18:25:22 ezanker

非常感谢！ =） – 2015-04-01 20:28:37

单击按钮后更改.innerHTML

回答

相关问题