Javascript jQuery Mobile - 动态创建表单元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4039428/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Mobile - Dynamically creating form elements
提问by Jon
I'm creating a web-database driven offline web-app targeted at iOS devices. I'm trying to use jQuery Mobile, but I have a problem in creating the various forms.
我正在创建一个针对 iOS 设备的网络数据库驱动的离线网络应用程序。我正在尝试使用 jQuery Mobile，但在创建各种表单时遇到问题。
The form options are taken from a database query, so they are inserted into the page after it has loaded, so the "jQuery-Mobilification" doesn't happen. Taking a quick look through the source, there doesn't seem to be any obvious way to call into this at this stage (of course it's an alpha release, and I think this would be a reasonably common request, so I'm hopeful it will come). Is there some kind of workaround I can put in to do this? I'm particularly interested in radio buttons, check boxes and select lists.
表单选项取自数据库查询，因此它们会在页面加载后插入到页面中，因此不会发生“jQuery-Mobilification”。快速浏览一下源代码，在这个阶段似乎没有任何明显的方法来调用它（当然它是一个 alpha 版本，我认为这将是一个相当普遍的请求，所以我希望它将会来）。我可以采取某种解决方法来做到这一点吗？我对单选按钮、复选框和选择列表特别感兴趣。
采纳答案by Tom
This is messing around in undocumented internals, but the following is working for me:
这在未记录的内部结构中混乱，但以下对我有用：
$("#some-div").load("/html/fragment/",
function() {
$(this).find("input").customTextInput();
});
There are equivalent methods for buttons, checkboxes etc.
按钮、复选框等有等效的方法。
Have a look at the _enchanceControls[sic] method in http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.js.
查看http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.js中的_enchanceControls[sic] 方法。
Update for 1.0Alpha2: As can be expected when playing around with the internals of a library, this no longer works in the latest version. Changing customTextInput()to textinput()fixes it a bit, but the theme isn't fully applied for some reason. We were warned...
1.0Alpha2 更新：正如在使用库的内部结构时可以预期的那样，这在最新版本中不再有效。更改customTextInput()以textinput()修复它，但由于某种原因该主题并未完全应用。我们被警告...
回答by naugtur
UPDATE
更新
Beta2 has a createevent. I will update my faq when the beta2 gets released. See http://jquerymobile.com/blog/2011/07/22/jquery-mobile-team-update-week-of-july-18th/
Beta2 有一个create事件。当 beta2 发布时，我会更新我的常见问题解答。见http://jquerymobile.com/blog/2011/07/22/jquery-mobile-team-update-week-of-july-18th/
Updated faq: http://jquerymobiledictionary.pl/faq.html
更新常见问题：http: //jquerymobiledictionary.pl/faq.html
As CaffeineFueled proposed - .page()is the way to make JQM work with any part of HTML
正如 CaffeineFueled 提出的那样 -.page()是使 JQM 与 HTML 的任何部分一起工作的方法
.page()can be called only once for an element. Call it on a wrapping element you add to the page. It should handle everything.
.page()一个元素只能调用一次。在添加到页面的包装元素上调用它。它应该处理一切。
回答by AlexeyMK
The current selected answer is slightly out of date. Use 'refresh', not 'page', for styling dynamically added content (lists or forms).
当前选择的答案有点过时。使用“刷新”而不是“页面”来设置动态添加的内容（列表或表单）的样式。
If you add items to a listview, you'll need to call the refresh() method on it to update the styles and create any nested lists that are added. For example,
$('ul').listview('refresh');
如果向列表视图添加项目，则需要对其调用 refresh() 方法以更新样式并创建添加的任何嵌套列表。例如，
$('ul').listview('refresh');
via the jQuery Mobile docs, 1.0.4a
回答by Josh Rickard
After your AJAX call finishes and you insert the form elements try calling:
在 AJAX 调用完成并插入表单元素后，尝试调用：
$("#the-page-id").page();
I believe the jquery-mobile team will be adding a .refresh() method on the various UI elements to solve this issue in the future.
我相信 jquery-mobile 团队将来会在各种 UI 元素上添加一个 .refresh() 方法来解决这个问题。
回答by Ryan Doom
Yeah the issue is as you described. The 'mobilization' is fired when the document is ready. But since your offline DB queries are asynchronous it ends after the document.ready is fired. So the DOM is updated later in the process and doesn't have the extra CSS added to all the divs and list items.
是的，问题和你描述的一样。当文档准备好时，“动员”被触发。但是由于您的离线数据库查询是异步的，因此它会在 document.ready 被触发后结束。因此 DOM 会在此过程的后期更新，并且不会将额外的 CSS 添加到所有 div 和列表项中。
I think you would have to change the source of the mobile js to not run on document ready but run when you tell it to run. Then you would have to call that function in your database callback.
我认为您必须更改移动 js 的源代码，使其不在文档就绪时运行，而是在您告诉它运行时运行。然后您必须在数据库回调中调用该函数。
Looks like that is the only option at the moment.
看来这是目前唯一的选择。
Traditionally I used jqtouch and now sencha. I haven't played much with jQuery mobile.
传统上我使用 jqtouch，现在使用 sencha。我没怎么玩过 jQuery 移动版。
ALTERNATIVELY - you could write out your HTML after querying it out of the database with the necessary CSS styles on it. If you use Firebug plugin for Firefox you can see what styles / classes are getting applied when the mobilization runs. You could just write out your HTML using those conventions. Not ideal, but would work.
或者 - 您可以在使用必要的 CSS 样式从数据库中查询出来后写出您的 HTML。如果您使用 Firefox 的 Firebug 插件，您可以看到在移动运行时应用了哪些样式/类。您可以使用这些约定写出您的 HTML。不理想，但会工作。
回答by CBG
This worked for me (jquerymobile1.7.0):
这对我有用（jquerymobile1.7.0）：
$('#formular').append('<div data-role="fieldcontain" class="ui-hide-label">' +
'<label for="name" class="ui-hidden-accessible">Name:</label>' +
'<input type="text" name="name" size="25" id="name" placeholder="Name"/>' +
'</div>');
$('#name').textinput();
There are currently so called plugin functions for all kind of form elements (e.g. slider, textinput etc.) to create them.
目前有所有类型的表单元素（例如滑块、文本输入等）的所谓插件函数来创建它们。
回答by Philip Frank
naugtur is right, you have to call .page() on any element that you add to the dom, then it works out nicely:
naugtur 是对的，您必须在添加到 dom 的任何元素上调用 .page() ，然后效果很好：
var el = $('<input type="text"/>')
el.page();
$('#something').append(el);
回答by Spike
Here's a link to the docs for this feature that Tom talked about. Not sure exactly when they were added, but I'm using it and it works for me!
这是 Tom 谈到的此功能文档的链接。不确定它们是何时添加的，但我正在使用它并且它对我有用！
http://jquerymobile.com/test/docs/forms/plugin-eventsmethods.html
http://jquerymobile.com/test/docs/forms/plugin-eventsmethods.html
