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

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 - 更改其“id、name、val() ...ETC。然后将它添加到 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