jQuery 移动克隆表单元素不起作用 [英] jQuery mobile cloned form elements not working

问题描述

我正在 jQuery mobile 中克隆一个表单，但克隆的表单元素似乎不起作用.IE 选择列表不会改变值，你不能滑动范围滑块.

我正在尝试使用以下代码来克隆一个表单，并在克隆表单的每个实例上增加 name 和 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});返回 $html.html();}$(document).on('pageinit', function(){$('
', {类":观察"，html:newObservation()}).appendTo('#auditContainer');$('#auditObservationButton').click(function() {$('
', {'类':'观察', 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 属性，但它们是可访问的.

解决方案

如果您使用 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 只会创建对象(功能")而不是修饰用户界面.同样对于 1.3.2，这不可用.它可以一起被破解，但需要大量的维护工作，所以如果你预先增强并坚持使用 1.4，我宁愿使用 1.4.否则尝试调用

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

明白我的意思:-)

最后提示:我通过 W3C 验证器运行了您的页面.仍然存在许多问题，包括一些重复的 ID，这也会在某些浏览器上破坏您的页面(拼写 IE).

I am cloning a form in jQuery mobile and the cloned form elements do not seem to work. IE the select lists do not change value, you cannot slide the range sliders.

I'm trying to use the following code to clone a form and increment the name and id values on each instance of the cloned form.

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

Here is a fiddle, which outlines the code but doesn't work due to jQM erros in the library itself (or so says jsfiddle) http://jsfiddle.net/FL398/

Here is an example of what Im encountering http://dirtybirddesignlab.com/FireSafe/audit.html#auditForm if you click 'Add Observation' the form clones, increments the name and id attributes of the elements correctly but they are in accessible.

解决方案

If you use Firebug, I recommend installing the Firequery add-on which will show all objects created by jQuery (and jQuery Mobile) on DOM elements.

You will see that none of the JQM widgets in your cloned form have objects set, meaning that while the UI looks correct, the elements are not enhanced, so they will not work.

In JQM 1.4 you can simply call $(your_form).enhanceWithin() to have JQM render all elements inside your cloned form. In JQM 1.3.2 this is not available, so I guess you would have to initialize things using trigger("create") for example.

Another point: It looks like you are pre-enhancing the markup (= doing JQMs work). Problem with this will be that your elements will look nice, but won't work without the "JQM treatment". This is why in 1.4 enhanced option is added to the first widgets, meaning you can set data-enhanced="true" in the source code and JQM will only create the object ("functionality") and not touch up the UI. Again for 1.3.2 this is not available. It can be hacked together, but is a lot of work to maintain, so I'd rather use 1.4 if you pre-enhance and insist on it. Otherwise try calling

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

to see what I mean :-)

Last tip: I ran your page through the W3C validator. There are still a number of issues including a handful of duplicate ids, which will also break your page on some browsers (spell IE).

这篇关于jQuery 移动克隆表单元素不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！