How to clone select and range inputs in jQuery mobile 1.3.2

问题

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.

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');
});

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.

回答1:

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.

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>

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>

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

回答2:

You need to trigger the create event, once a new element is added to a container element

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

Demo: Fiddle

Also remove the id from the cloned element since ID of an element must be unique like

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

来源：https://stackoverflow.com/questions/20625382/how-to-clone-select-and-range-inputs-in-jquery-mobile-1-3-2

标签

jquery

jquery-mobile

clone