jQuery mobile 克隆的表单元素不起作用

Question

我正在 jQuery mobile 中克隆一个表单，克隆的表单元素似乎不起作用。 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 的示例，如果您单击“添加观察”，表单克隆、正确递增元素的名称和 id 属性但它们是可访问的。

Answer 1

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

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

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

还有一点： 看起来您正在预先增强标记（= 做 JQM 工作）。这样做的问题是您的元素看起来不错，但如果没有“JQM 处理”就无法工作。这就是为什么在 1.4 中将enhanced 选项添加到第一个小部件，这意味着您可以在源代码中设置data-enhanced="true"，JQM 只会创建对象（“功能”）而不修饰 UI。同样对于 1.3.2，这是不可用的。它可以一起破解，但维护工作量很大，所以如果您预先增强并坚持使用1.4，我宁愿使用它。否则尝试调用

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

看看我的意思:-)

最后一个提示： 我通过W3C validator 运行了您的页面。仍然存在许多问题，包括一些重复的 id，这也会破坏您在某些浏览器上的页面（拼写 IE）。