带有动态字段的 jQueryMobile 和 datebox 插件

Question

使用 JQueryMobile 最终版本和 jquery.mobile.datebox.js 插件。在 pageshow 事件中，我动态添加一系列字段，其中一些是使用 datebox 插件的日期/时间字段。一切工作正常，除了在较小的设备上，尤其是 iPhone 上（当您将桌面浏览器设置得特别窄时，也会发生这种情况）。当您单击日期或时间图标时，会弹出帮助程序，我可以选择一个日期/时间，它会进入该字段，但该字段会与 .

这是页面显示代码的示例。它调用 Web 服务来获取 json 数据，该数据定义了应添加到表单中的字段。这些字段可以是日期、单选或文本。除了弹出窗口后重新绘制日期/时间字段之外，一切正常：

$('#editthing').live('pageshow', function (e, info) {
    var listurl = "/editthingattribute";
    //Add a cache 'buster' parameter
    var date = new Date();
    listurl = listurl + '?p_uid=' + date.getTime();
    $.ajax({
        url: listurl + "&p_id=" + getUrlVar("p_id") + "&p_thingattribute=" + getUrlVar("p_thingattribute"),
        contentType: "application/json; charset=utf-8",
        dataType: 'json',
        success: function (data) {
            var form = $("#formcontent");
            form.html = "";
            //Add the fields defined in the results from the database call
            $.each(data.editthingfields, function (index, item) {
                //Set the global field type
                fieldType = item.fieldType;

                if (item.fieldtype == 'date') {
                    inputType = 'date';

                    //This messes up on narrow browsers
                    form.append('<div data-role="fieldcontain">' + '<label for="' + item.fieldname + '_date">' + item.fieldlabel + ' (Date)</label>' + '<input name="' + item.fieldname + '_date" id="' + item.fieldname + '_date" ' + 'type="date" data-role="datebox" data-options=\'{"mode": "calbox", "dateFormat":"dd/mm/YYYY"}\' ' + 'value="' + item.fieldvalue.substring(0, 10) + '" />' + '</div>' + '<div data-role="fieldcontain">' + '<label for="' + item.fieldname + '_time">' + item.fieldlabel + ' (Time)</label>' + '<input name="' + item.fieldname + '_time" id="' + item.fieldname + '_time" ' + 'type="date" data-role="datebox" data-options=\'{"mode": "timebox"}\' ' + 'value="' + item.fieldvalue.substring(11, 17) + '" />' + '</div>');
                } else if (item.fieldtype == 'radio') {
                    inputType = 'radio';
                    //Add a suitable set of radio buttons for the attribute being edited.
                    form.append('<div data-role="fieldcontain">' + '<fieldset data-role="controlgroup">' + '<legend>' + item.fieldlabel + '</legend>');
                    var optionsarray = item.fieldoptions.split(',');
                    for (var i = 0; i < optionsarray.length; i++) {
                        if (item.fieldvalue == optionsarray[i]) {
                            form.append('<input name="' + item.fieldname + '" id="' + optionsarray[i] + '" ' + 'type="' + item.fieldtype + '" value="' + optionsarray[i] + '" checked="checked" />');
                        } else {
                            form.append('<input name="' + item.fieldname + '" id="' + optionsarray[i] + '" ' + 'type="' + item.fieldtype + '" value="' + optionsarray[i] + '" />');
                        }
                        form.append('<label for="' + optionsarray[i] + '">' + optionsarray[i] + '</label>');
                    }
                    form.append('</fieldset>' + '</div>');
                } else {
                    inputType = 'text';
                    form.append('<div data-role="fieldcontain">' + '<label for="' + item.fieldname + '">' + item.fieldlabel + '</label>' + '<input name="' + item.fieldname + '" id="' + item.fieldname + '" ' + 'type="' + item.fieldtype + '" value="' + item.fieldvalue + '" />' + '</div>');
                }
            });
            var thinghdr = $("#thingheader");
            thinghdr.html = "";
            $(data.thingdetails).each(function (index) {
                thinghdr.append("<h3>" + this.thingoper + " " + this.thingnumber + " " + this.thingdesc + "</h3>");
            });

            $("#editthing").page("destroy").page();
        }
    });
});

我猜问题是由于动态添加字段造成的，但我不知道如何解决它。

提前致谢 麦克风

Answer 1

您可能已经超越了这一点，但我发现更新元素的 jQuery 移动方式是在它们上调用 create 。也许它会帮助您获得您感兴趣的行为，而不是 page("destroy").page();

在我将动态元素附加到存在中后，我调用触发器("create")像这样：

$(".selector").append(elementToAppend).trigger("create");

这是来自 jQuery mobile 文档页面 这里。

增强新标记

页面插件调度 pageInit 事件，
大多数小部件使用它来自动初始化自己。只要一个
引用widget插件脚本，它会自动增强任何
它在页面上找到的小部件的实例。

但是，如果您在客户端生成新的标记或通过以下方式加载内容
Ajax并将其注入到页面中，可以触发create事件
处理其中包含的所有插件的自动初始化
新的标记。这可以在任何元素上触发（甚至是页面
div 本身），省去了手动初始化每个插件的任务
（列表视图按钮、选择等）。

例如，如果加载了 HTML 标记块（例如登录表单）
通过Ajax，触发create事件自动变换
它包含的所有小部件（在本例中为输入和按钮）到
增强版本。此场景的代码为：

$( ...包含小部件的新标记... ).appendTo( ".ui-page"
).trigger( "创建" );