x-editable -自动启动多个选择元素

Question

我的页面包含多个具有data-type=“select”的x可编辑元素：

<a href="#" data-type="select" data-name="services_0" data-url="/customer/editfield" data-pk="1028" id="services_0">True</a>
<a href="#" data-type="select" data-name="services_1" data-url="/customer/editfield" data-pk="1028" id="services_1">False</a>

我试着用下面的javascript代码用x-editable来初始化它们：

var services = ['services_0', 'services_1'];

    $.each(services, function(index, value) {
        $('#' + value).editable({
            prepend: 'Select one',
            source: [
            {
                value: 1,
                text: 'True'
            },
            {
                value: 0,
                text: 'False'
            }
            ],
            display: function(value, sourceData) {
                var colors = {
                    1: "green",
                    0: "blue"
                },
                elem = $.grep(sourceData, function(o) {
                    return o.value == value;
                });

                if (elem.length) {
                    $(this).text(elem[0].text).css("color", colors[value]);
                } else {
                    $(this).empty();
                }
            }
        });
    });

问题是它只绑定了第一个元素。

Answer 1

检查页面源代码后，我发现query $.grep给了我一个关于e.length()的TypeError。它在此行的'value‘上触发：

display: function(value, sourceData) {

一旦我将data-value="“添加到元素中，一切都按预期工作：

<a href="#" data-value="" data-type="select" data-name="services_0" data-url="/customer/editfield" data-pk="1028" id="services_0">True</a>
<a href="#" data-value="" data-type="select" data-name="services_1" data-url="/customer/editfield" data-pk="1028" id="services_1">False</a>