X-Editable使用自定义按钮保存

Question

这是我小提琴的链接： https://jsfiddle.net/v58breo8/1/

我想知道id是否可以通过单击保存按钮将更新的输入保存到页面。如果您尝试编辑然后单击“保存”，则文本将不会更改。

我还希望用户只有在点击保存按钮时才能保存文本，如果你在编辑后按Enter键，那么它将正常运行，文本将会改变。

这是我的JQuery：

$.fn.editable.defaults.mode = 'inline';
$.fn.editable.defaults.showbuttons = false;
$.fn.editable.defaults.type = 'text';

$('#edit-btn').click(function(e){
    e.stopPropagation();
  $('#username').editable('toggle');
    $('#edit-btn').addClass('hidden');
  $('#save-btn').removeClass('hidden');
});

$('#save-btn').click(function(){
            $('#username').editable({
        success: function (response, newValue) {
            return $.ajax({
                type: 'POST',
                data: { user: newValue},
                url: '/post'
            });
        },
        name: 'username',
        pk: 1,
        placement: 'top',
        type: 'text',
        toggle: 'manual'
    });

    $('#edit-btn').removeClass('hidden');
    $('#save-btn').addClass('hidden');
});