Javascript 可编辑元素，覆盖未工作的原始文本（x-可编辑）

我已经做了一段时间了，我似乎想不出一个解决办法

我使用X-editable Jquery允许用户编辑页面中的元素。它大部分工作都很好，但是我在把地址记下来时遇到了很多麻烦。我编辑了插件附带的address.js文件，这样就可以有更多的字段Street、City、State等，如果点击编辑按钮，这些字段就会正确显示

但是，当您提交更改时，它不会更改原始文本

JSFiddle，让您明白我的意思：

当您提交更改时，它应该会替换原始文本。您可以在x-editable网站的底部看到示例：://vitalets.github.io/x-editable/demo-bs3.html

不知道我做错了什么。我认为这与我在address.js文件中所做的更改有关。我已经上传了它，所以你可以看到我做了什么：。以及原始版本：//vitalets.github.io/x-editable/assets/x-editable/inputs-ext/address/address.js

我试着模仿我在网站演示的源代码中看到的内容：

$('#acct-address').editable({
    value: {
        city: "Moscow", 
        street: "Lenina", 
        building: "12"
    },
    validate: function(value) {
        if(value.city == '') return 'city is required!'; 
    },
    display: function(value) {
        if(!value) {
            $(this).empty();
            return; 
        }
        var html = '<b>' + $('<div>').text(value.city).html() + '</b>, ' + $('<div>').text(value.street).html() + ' st., bld. ' + $('<div>').text(value.building).html();
        $(this).html(html); 
    }         
});

但是，当我点击编辑链接进行更改时，只会打开一个文本字段，而不是文本[Output][Output]应该打开的多个文本字段。同样，当您点击提交时，它不会更改任何内容。我还修改了上面的值，使之与我在address.js中添加的值一致，同样的事情也发生了

希望这是有意义的。不知道我在做什么。我对javascript/jquery以及所有插件的工作方式还是相当陌生的

提前谢谢

更改HTML:

<div class="acct-sub">
    <strong>Address</strong><br>
    <span id="acct-address">5555 E. PEF Lane</span><br>
    <span id="acct-city">Phoenix</span>, <span id="acct-state">AZ</span> 
    <span id="acct-zip">85142</span> <span style="float: right;">
    <a href="#" id="address-edit">Edit</a></span>
</div>

$('#acct-address').editable({
    type: 'address',   
    pk: 1,    
    title: 'Edit Your Billing & Contact Address',
    display: function(value, sourceData) {
        if (value !== null) {
            $("#acct-address").text(value.street);
            $("#acct-city").text(value.city);
            $("#acct-state").text(value.state);
            $("#acct-zip").text(value.zipcode);
         }
    }
});