Question

使用jquery和jquery mobile我尝试制作动态表单。创建或删除输入字段，以便始终留下一个空输入字段。

这是我的jquery代码来实现这一点（在这里试试： http://jsfiddle.net/SR864/17/）：

$(document).ready(function() {
    var total = 1;
    // add new field
    $("#bar").on("input", ".input", function() {
        // add new field
        if ($(".input").last().val() != "") {
            var newFields = $(this).closest("p").clone();

            newFields.find(":input").each(function() {
                var name = $(this).attr('name').replace('-' + (total - 1), '-' + total);
                var id = 'id_' + name;
                $(this).attr({'name': name, 'id': id}).val('');

                total++;
            });
            $(this).closest("p").after(newFields);
        }
    });
    $("#bar").on("input", ".input", function() {
        // remove empty field
        if ($(this).val() == "") {
            $(this).closest("p").remove();
        }
    });
});

我还希望在输入字段中包含“删除按钮”以从输入字段中删除文本。 jquery mobile为此提供了data-clear-btn="true"。但是，data-clear-btn="true"的某些行为只适用于第一个输入字段 - 新的（克隆的）字段不能获得清除按钮。

问题
如何为克隆的输入字段设置清除按钮？

奖金问题
按下清除按钮后输入字段为空时必须删除什么？

Answer 1

jQM将input字段包含在div ui-input-text中。你需要克隆input本身 - 而不是包装div - 改变它的＆＃39; id，name，val()等。然后使用form函数将其添加到.textinput()并增强。

此外，您应该将代码包装在pagecreate事件中。

$(document).on("pagecreate", function () {
    var counter = 0;
    $("#bar").on("input", function (e) {
        if ($(e.target).val().length === 1) { /* after 2 characters add a new input */
            counter++;
            var id = "input-" + counter;
            var input = $(e.target).clone().prop({
                id: id,
                name: id
            }).val("");
            $(e.target).closest(".ui-input-text").after(input);
            $("#" + id).textinput();
        }
    });
});

<强> Demo

Answer 2

我检查了问题。默认情况下，十字按钮（它是一个标签）有一个'ui-input-clear-hidden'类，它会一直隐藏到你输入之前。虽然您在开始键入后正在克隆元素，但复制元素也有这个类使其隐藏（可能是在删除类'ui-input-clear-hidden'之前完成克隆）。因此，我建议明确地从克隆对象中删除“ui-input-clear-hidden”类，如下所示。

$("#bar").on("input", ".input", function() {
    // add new field
    if ($(".input").last().val() != "") {
        var newFields = $(this).closest("p").clone();

        newFields.find(":input").each(function() {
            var name = $(this).attr('name').replace('-' + (total - 1), '-' + total);
            var id = 'id_' + name;
            $(this).attr({'name': name, 'id': id}).val('');

            total++;
        });
        $(this).closest("p").after(newFields);
    }

    /* New line Added for Fix*/
    newFields.find('a').removeClass('ui-input-clear-hidden');
});

使用data-clear-btn =“true”克隆jquery移动输入字段

2 个答案: