Question

用户可以添加新标签和输入字段。标签可以通过jeditable进行编辑。在某些事件上（f.e. click）我想得到一个关联数组，其中key是label的文本，value是相应输入的值。

两个问题：

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

$(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>

小提琴：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.

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

1 个答案: