如何在 jQuery mobile 1.3.2 中克隆选择和范围输入

Question

在非移动 jquery 中，这很简单。在这方面，添加移动图书馆并不是一件好事。我有一个表单，并试图在按钮的单击事件上克隆它。我遇到 2 个问题中的 1 个，无法解决。我可以克隆表单并对其进行样式设置，然后范围输入或选择列表等元素将不可用。选择不会改变它们的值，并且范围输入不起作用。或者，我可以让选择工作，但它们克隆为“未增强”项目。

这是一个简单的例子。 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/ 我有一个更复杂的案例，但我试图先了解较小的部分。我已经搜索了几个小时，当我介绍它时，我找不到任何东西。 谢谢。

Answer 1

问题在于pagecreate 上的隐藏 模板正在被增强（样式化）。简单地说，您可以保留该模板 native（未设置样式），这样您就可以克隆它，然后毫无问题地对其进行增强。

最简单的方法是全局告诉 jQuery Mobile 不要在 mobileinit 事件上使用特定类增强任何元素。我在回答中使用了native 类并将其添加到模板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库之前，如下：

<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")，它们也不会得到增强。

$('.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

Answer 2

你需要触发create事件，一旦一个新元素被添加到一个容器元素中

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

演示：Fiddle

还要从克隆的元素中删除 id，因为元素的 ID 必须是唯一的，例如

$('#audit-observation-person').clone().removeAttr('id').appendTo($ct);