如何告诉jquery mobile将类添加到listview中动态添加的表单字段？
[英]How do I tell jquery mobile to add classes to dynamically added form fields in a listview?
问题描述
I am struggling to get JQM to reinitialize a jquery page with a listview that contains form fields. 
我正在努力让JQM重新初始化一个包含表单字段的listview的jquery页面。
One of the form elements is initialized as part of JQM's normal initialization process, that is displaying correctly with all the correct class applied to all elements. 其中一个表单元素作为JQM正常初始化过程的一部分进行初始化，即正确显示应用于所有元素的所有正确类。
The others are all added dynamically using JQ's append 其他都是使用JQ附加动态添加的
When elements are added dynamically I cannot find the correct method to reinitialize the list to apply the styling to everything, the fieldcontain div the label & the textarea. 当动态添加元素时，我找不到重新初始化列表以将样式应用于所有内容的正确方法，fieldcontain div标签和textarea。
I have prepared an example to show the different methods to reinitialize the elements that I've tried based on other questions found on SO and around the web. 我已经准备了一个示例来展示根据在SO和网络上发现的其他问题重新初始化我尝试的元素的不同方法。
http://jsfiddle.net/robaldred/UPsQr/ http://jsfiddle.net/robaldred/UPsQr/
In my example, row 5 is correctly initialize, however it requires calling the fieldcontain() method the textinput() method and manually add the ui-input-label class to the label. 在我的示例中，第5行正确初始化，但是它需要调用fieldcontain()方法textinput()方法并手动将ui-input-label类添加到标签。 This feels like a lot of messing about, I must be missing something. 这感觉好像很乱，我一定是在遗漏一些东西。
2 个解决方案
解决方案1
1 已采纳 2012-01-12 15:43:28
Trigger a create event on the page like this: 在页面上触发创建事件，如下所示：
$("#page").trigger("create");
Create vs. refresh: An important distinction
Note that there is an important difference between the create event and refresh method that some widgets have.
For example, if you had a page where you dynamically appended a new unordered list with data-role=listview attribute after page creation, triggering create on a parent element of that list would transform it into a listview styled widget.
Referenece: http://jquerymobile.com/demos/1.0/docs/pages/page-scripting.html 参考： http ： //jquerymobile.com/demos/1.0/docs/pages/page-scripting.html
Updated your fiddle - http://jsfiddle.net/UPsQr/2/ 更新了你的小提琴 - http://jsfiddle.net/UPsQr/2/
解决方案2
1 2012-01-12 15:53:05
Working Example: 工作实例：
JS JS
$('#add_element').click(function() {
var list = $('ul[data-role="listview"]');
var nextLi = ((list.children().length) + 1);
li = '<li><div data-role="fieldcontain"><label for="textarea'+nextLi+'">Input:</label><textarea id="textarea'+nextLi+'" name="textarea'+nextLi+'"></textarea></div></li>';
list.append(li);
list.listview('refresh');
$('#page').trigger('create');
});
//$('#add_element').hide();
HTML HTML
<html>
<head>
</head>
<body>
<div id="page" data-role="page">
<!-- First field is done by jQM's normal initialization -->
<!-- The Rest are added onload and appended to the listview -->
<ul data-role="listview">
<li>
<div data-role="fieldcontain">
<label for="textarea1">Input:</label>
<textarea id="textarea1" name="textarea1"></textarea>
</div>
</li>
</ul>
<a data-role="button" id="add_element">Add Fields</a>
</div>
</body>
</html>
NOTE: 注意：
jQM Supports jQuery 1.6.4 jQM支持jQuery 1.6.4
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.