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

问题描述

我正在用jQuery mobile克隆表单，而克隆的表单元素似乎不起作用. 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.

我正在尝试使用以下代码克隆表单，并在克隆的表单的每个实例上增加名称和id值.

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

这是一个小提琴，它概述了代码，但由于库本身中的jQM错误(或称jsfiddle称)而无法使用

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/

以下是我遇到 http://dirtybirddesignlab.com/FireSafe/audit的示例. html#auditForm 如果您单击添加观察值"，则表单克隆将正确地增加元素的名称和id属性，但它们是可访问的.

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.

推荐答案

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

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.

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

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.

在JQM 1.4中，您可以简单地调用$(your_form).enhanceWithin()以使JQM呈现克隆表单中的所有元素.在JQM 1.3.2中不可用，因此我想您将不得不使用trigger("create")进行初始化.

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.

另一点: 看来您正在预先增强标记(=做JQM工作).问题在于您的元素看起来不错，但没有"JQM处理"将无法使用.这就是为什么在1.4中将enhanced选项添加到第一个窗口小部件的原因，这意味着您可以在源代码中设置data-enhanced="true"，而JQM将仅创建对象(功能")而不会修改UI.同样对于1.3.2，此功能不可用.它可以一起被黑客入侵，但是要维护很多工作，因此如果您要预先增强并坚持使用它，我宁愿使用1.4.否则尝试致电

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")

明白我的意思:-)

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

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 Mobile克隆的表单元素不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！