从动态创建的可编辑标签和输入创建关联数组

Question

用户可以添加新标签和输入字段。该标签可以使用 jeditable 进行编辑。在某些事件中（f.e。点击）我想要一个关联数组，其中键是标签的文本，值是相应输入的值。

两个问题：

更改标签文本并单击其他位置后，标签跳回到它之前设置的文本（描述）。如何配置 jeditable 以保留应该作为创建数组键的新文本？
单击按钮 "done" 我遍历标签和相应的输入并将值推送到名为 "values" 的数组。不幸的是，这仍然是空的，我在这里做错了什么？

$(document).ready(function() {

    /* Add new Form Fields */
    var a = 0;

    $(".add").click(function() {
        a++;
        $(".userinput").append('<label for="'+a+'">Description</label> <input id="'+a+'" type="text" /><br/>');
    });

    /* Create Assoc array based on label and input */
    $('.done').click(function() {
        var values = [];
        $('input').each(function() {
            var $label = $("label[for='" + this.id + "']").html();
            values[$label] = $(this).val();
        });
        alert(values);
    });

    /* Make label editable */
    $(document.body).on('click', 'label', function() {
        $(this).editable({
            type: 'text'
        });
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jeditable.js/1.7.3/jeditable.min.js"></script>

<div class="userinput"></div>
<button class="add">add new input</button>
<button class="done">done</button>

fiddle: https://jsfiddle.net/svkq95fk/1/

Answer 1

您正在尝试使用像关联数组这样的常规数组。请改用对象。

var values = {};  //curly brackets instead of square brackets

您也没有正确使用 Jeditable。 documentation 表示第一个参数必须是处理新值的 url 或 JavaScript 函数。第二个参数是配置对象。

$(this).editable('the_value_handler.php', {
    type: 'text'
});
////OR
$(this).editable(function (value, settings) {
    console.log (settings);
    return value; 
}, {
    type: 'text'
});

https://jsfiddle.net/svkq95fk/2/

我个人会使用 console.log 而不是 alert 来输出调试信息。弹出窗口很烦人。

编辑

文档还说在可编辑元素外单击的默认行为是放弃更改。您可以使用 onblur 选项更改它。 https://jsfiddle.net/svkq95fk/4/

onblur : cancel Clicking outside editable area cancels changes. Clicking submit button submits changes.
onblur : submit Clicking outside editable area submits changes.
onblur : ignore Click outside editable area is ignored. Pressing ESC cancels changes. Clicking submit button submits changes.

从动态创建的可编辑标签和输入创建关联数组

Create assoc array from dynamically created editable label and input

jquery

jeditable