jQuery手机克隆表单元素无法正常工作

Question

我在jQuery手机中克隆了表单，克隆的表单元素似乎无法工作。 IE的选择列表不会更改值，您不能滑动范围滑块。

我正在试图使用下面的代码克隆一个窗体并增加克隆窗体的每个实例上的名称和ID值。

function newObservation() { 
    var len = $('.observation').length; 
    var titleLen = $('.observation').length + 2; 
    var $html = $('.observationTemplate').clone(); 

    $('.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}); 
    $html.find('[name=audit-observation-notes]').eq(0).attr({name:"audit-observation-notes" + len, id:"audit-observation-notes" + len}); 
    $html.find('[name=audit-observation-recommendation]').eq(0).attr({name:"audit-observation-recommendation" + len, id:"audit-observation-recommendation" + len}); 
    $html.find('[name=audit-observation-severity]').eq(0).attr({name:"audit-observation-severity" + len, id:"audit-observation-severity" + len}); 
    $html.find('[name=audit-observation-person]').eq(0).attr({name:"audit-observation-person" + len, id:"audit-observation-person" + len}); 
    $html.find('[name=audit-observation-date]').eq(0).attr({name:"audit-observation-date" + len, id:"audit-observation-date" + len}); 
    return $html.html(); 
} 
$(document).on('pageinit', function(){ 
    $('<div/>', { 
     'class' : 'observation', html:newObservation() 
    }).appendTo('#auditContainer'); 

    $('#auditObservationButton').click(function() { 
     $('<div/>', { 
      'class':'observation', html:newObservation() 
      }).hide().appendTo('#auditContainer').slideDown('slow'); 
    }); 
    $('#auditForm').on('click', '.close', function(){ 
     $(this).parent().fadeOut(); 
    }); 
}); 

这里是一个小提琴，其中概述了代码，但不会因为JQM误差修改库本身的工作（或者说这样的jsfiddle）http://jsfiddle.net/FL398/

这里是什么林遇到http://dirtybirddesignlab.com/FireSafe/audit.html#auditForm如果一个例子您单击“添加观察”表单克隆，正确地增加元素的名称和标识属性，但它们是可访问的。

Answer 1

如果您使用Firebug，我建议您安装Firequery加载项，它将显示由jQuery（和jQuery Mobile）在DOM元素上创建的所有对象。

您将看到克隆表单中的JQM小部件都没有设置对象，这意味着虽然UI看起来正确，但这些元素不会增强，因此它们不起作用。

在JQM 1.4中，您可以简单地调用$(your_form).enhanceWithin()让JQM呈现克隆表单中的所有元素。在JQM 1.3.2中，这是不可用的，所以我想你将不得不使用trigger("create")来初始化事物。

另一点： 它看起来像你预先增强标记（=做JQMs工作）。问题在于你的元素看起来不错，但没有“JQM处理”就无法工作。这就是为什么1.4 enhanced选项被添加到第一个小部件中，这意味着您可以在源代码中设置data-enhanced="true"，并且JQM只会创建对象（“功能”）而不会触及UI。再次为1.3.2这是不可用的。它可以被黑客攻击，但是需要很多工作来维护，所以如果你预先加强并坚持，我宁愿使用1.4。否则，尝试调用

$(document).find("form").trigger("create") 

，看看我的意思:-)

最后提示： 我通过W3C validator跑到你的页面。还有一些问题，包括一些重复的ID，这也会在一些浏览器上打破你的页面（拼写IE）。