如何在jQuery Mobile 1.3.2中克隆选择和范围输入 [英] How to clone select and range inputs in jQuery mobile 1.3.2

问题描述

在非移动jquery中，这很简单.在这方面，添加移动库并不是一种好方法.我有一个表单，正在尝试在按钮的click事件上克隆它.我遇到2个问题中的1个，无法解决此问题.我可以克隆表单并设置样式，然后使用范围输入或选择列表之类的元素不可用.选择将不会更改其值，并且范围输入无效.或者，我可以使选择工作，但它们会克隆为未增强"的项目.

In non mobile jquery this is a snap. Adding the mobile library has not been kind in that regard. I have a form and am trying to clone it on a click event of the button. I run into 1 of 2 issues and cannot solve this. I can either clone the form and it is styled, then elements like range inputs or select lists are unusable. The selects will not change their value and range inputs don't work period. Or, I can get the selects to work, but they clone as 'un-enhanced' items.

这是一个简单的例子. HTML

Here is a simple example. HTML

 <div id="auditForm">   
<div data-role="fieldcontain" class="foo">
    <select name="audit-observation-person" id="audit-observation-person" data-theme="e" data-corners="false">
        <option value="" selected>Observation Person</option>
        <option value="Jim">Jim</option>
        <option value="Bob">Bob</option>
        <option value="Gary">Gary</option>
    </select>
</div>

<div id="auditContainer"></div>

<div data-role="controlgroup" data-type="horizontal" data-theme="d">
    <a href="#" id="auditObservationButton" data-role="button" data-icon="plus" data-iconpos="right" data-inline="true" data-theme="b">Add Observation</a>
</div>

jQuery

$('#auditForm').on('click', '#auditObservationButton', function() {
    $('#audit-observation-person').clone().appendTo('#auditContainer');
});

和小提琴 http://jsfiddle.net/f4Br6/ 我的案子要复杂得多，但我想先将注意力集中在较小的部分上.我已经搜索了好几个小时，当我介绍它的时候似乎什么也找不到. 谢谢.

and the fiddle http://jsfiddle.net/f4Br6/ I have a much more complex case, but am trying to get my head around the smaller pieces first. I have searched, for hours, and nothing I can find seems to work when I introduce it. thank you.

推荐答案

问题是 hidden 模板在pagecreate上得到了增强(样式化).简单来说，您可以保留该模板 native (未设置样式)，以便可以克隆它，然后毫无问题地对其进行增强.

The problem is that the hidden template is being enhanced (styled) on pagecreate. Simply, you can keep that template native (un-styled) so you can clone it and then enhance it with no issues.

最简单的方法是全局告诉jQuery Mobile不要在mobileinit事件上使用特定的类增强任何元素.我在答案中使用了native类，并将其添加到模板 observationTemplate 中的所有元素中.

The easiest way is to globally tell jQuery Mobile not to enhance any element with a specific class on mobileinit event. I've used native class in my answer and added it to all elements in the template observationTemplate.

<a href="#" data-role="button" data-icon="delete" data-iconpos="notext" data-inline="true" data-theme="b" class="close native">close</a>

用于全局修改默认值的代码应放置在 jQuery 之后和 jQuery Mobile 库之前，如下所示:

Code for modifying defaults globally should be placed after jQuery and before jQuery Mobile libraries, as follows:

<script src="jquery-1.9.1.min.js"></script>
<script>
   $(document).on("mobileinit", function() {
     $.mobile.page.prototype.options.keepNative = ".native";
   });
</script>
<script src="jquery.mobile-1.3.2.min.js"></script>

现在，所有具有类native的元素都不会得到增强.克隆这些元素，并在增强它们之前先.removeClass("native").如果您不这样做，即使使用.trigger("create")，它们也不会得到增强.

Now, all elements with class native wont be enhanced whatsoever. Clone those elements, and .removeClass("native") before you enhance them. If you fail to do so, they wont be enhanced even with .trigger("create").

$('.observationTitle:eq(0)').text("Observation - " + titleLen);
  $html.find('[name=audit-observation-category]').eq(0).attr({
    name: "audit-observation-category" + len,
    id: "audit-observation-category" + len
}).removeClass("native"); /* this */

演示

Demo

这篇关于如何在jQuery Mobile 1.3.2中克隆选择和范围输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！