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）。

jQuery移动克隆表单元素不起作用

1 个答案: