More Reading:

  • permanent-lovely

  • permission-prevention

  • persuade-cloth

  • photograph-abroad

  • pile-steel

  • pin-companion

  • pink-expensive

  • pipe-bold

  • pity-pin

  • plaster-arch-friendship

  • collapsible | John Chacko

    Dynamically added contents are to be enhanced in jQuery Mobile.
    This was mostly done using ‘.trigger( “create” )’

    But .trigger( “create” ) has been deprecated since 1.4 and replaced with ‘enhanceWithin()’

    Here is a demo of dynamically adding collapsible and enhancing it.

    jqm1.4x.enhanceWithin.html

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>enhanceWithin demo</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> 
    
    <script>
    	$.mobile.document.on("click", "#insert-content", function () {
    		var $pageContent = $("#page-content");
    
    		var countries =
    			"<div>" +
    			  "<div data-role='collapsible' data-collapsed='false'>" +
    				"<h2>Countries</h2>" +
    				"<ul data-role='listview'>" +
    				  "<li><a href='http://en.wikipedia.org/wiki/Australia'>Australia</a></li>" +
    				  "<li><a href='http://en.wikipedia.org/wiki/Russia'>Russia</a></li>" +
    				  "<li><a href='http://en.wikipedia.org/wiki/Paraguay'>Paraguay</a></li>" +
    				  "<li><a href='http://en.wikipedia.org/wiki/Belgium'>Belgium</a></li>" +
    				  "<li><a href='http://en.wikipedia.org/wiki/Democratic_Republic_of_the_Congo'>Congo</a></li>" +
    				"</ul>" +
    			  "</div>" +
    			"</div>";
    
    		var cities =
    			"<div>" +
    			  "<div data-role='collapsible' data-collapsed='false'>" +
    				"<h2>Cities</h2>" +
    				"<ul data-role='listview'>" +
    				  "<li><a href='http://en.wikipedia.org/wiki/Sydney'>Sydney</a></li>" +
    				  "<li><a href='http://en.wikipedia.org/wiki/Yekaterinburg'>Yekaterinburg</a></li>" +
    				  "<li><a href='http://en.wikipedia.org/wiki/Asuncion'>Asunci&oacute;n</a></li>" +
    				  "<li><a href='http://en.wikipedia.org/wiki/Liege'>Li&egrave;ge</a></li>" +
    				  "<li><a href='http://en.wikipedia.org/wiki/Kinshasa'>Kinshasa</a></li>" +
    				"</ul>" +
    			  "</div>" +
    			"</div>"; 
    
    		$pageContent.append(countries).append(cities);
    		$pageContent.enhanceWithin();
    
    	});
    
    </script>
    </head>
    <body>
     
     
    <div data-role="page">
    	<div data-role="header">
    		<h2>jQuery Mobile 1.4.2 Example</h2>
    	</div>
    	<div role="main" class="ui-content" id="page-content">
    		<p>
    			Content will be added at runtime when you click the button below.
    		</p>
    		<p>
    			<a href="#" id="insert-content" data-role="button">Insert</a>
    		</p> 
    	</div>
    </div> 
    </body>
    </html>