Когда этот код выполняется, вы можете видеть, что он не отображает программно добавленное поле ввода как элемент мобильного стиля.Я мог бы заставить это добавить все классы, которые вставляются при отображении страницы (закомментировано).Есть ли более простой способ?
http://jsfiddle.net/mckennatim/KKTr4/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
</head>
<body>
<div id="thelists" data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content">
<h3>Add List</h3>
<form>
<div data-role="controlgroup" id="addwhat">
<input type="text" name="inp0" class="inp" />
</div>
<div data-role="controlgroup" data-type="horizontal" class="aisubmit">
<input type="submit" data-theme="b" id="addinput" value="Add Input"/>
</div>
</form>
</div><!-- /content -->
</div><!-- /page -->
<script>
var ct =0;
$('body').on('click', "#addinput", function (e) {
ct++;
e.stopImmediatePropagation();
e.preventDefault();
//to add form elemnt you have to add all the class css stuff
//$('#addwhat').append('<input type="text" name="list' + ct + '" class="inp ui-input-text ui-body-c ui-corner-all ui-shadow-inset" />');
$('#addwhat').append('<input type="text" name="list' + ct + '"/>');
});
</script>
</body>
</html>