在 X-Editable 中按项目修改按钮模板？答案

【问题标题】：Modify Button template in X-Editable on a per item basis?在 X-Editable 中按项目修改按钮模板？
【发布时间】：2015-06-23 10:22:55
【问题描述】：

我正在尝试将自定义按钮模板与 X=Editable jQuery 库一起使用。

我知道有一种方法可以使用全局方法设置按钮模板，该方法会影响页面上的所有表单字段。我想弄清楚如何在每个项目的基础上使用自定义模板？

这里是 DOCS 页面和部分，其中显示了如何设置全局按钮模板：http://vitalets.github.io/x-editable/docs.html#global

上面写着：

$.fn.editableform.buttons

按钮模板。自动插入.editable-buttons。必须包含类 .editable-submit 和 .editable-cancel。
默认值：

<button type="submit" class="editable-submit">ok</button>
<button type="button" class="editable-cancel">cancel</button>

因此您可以看到，您可以像这样轻松地将按钮模板设置为全局 JavaScript 变量...
$.fn.editableform.buttons = 'button HTML here';

如何仅为 1 个特定的表单字段设置自定义按钮模板？

【问题讨论】：

标签： javascript jquery x-editable

【解决方案1】：

我找到了这个解决方案，它可以为我做到这一点。我想为特定的 x 可编辑对象设置一个文本发送按钮而不是 glyphicon-ok。因此，如果出现弹出框并且此弹出框用于我的按钮，我会使用 MutationObeserver 进行侦听：

var MutationObserver = MutationObserver || WebKitMutationObserver || MozMutationObserver;
var observer = new MutationObserver(function(mutations, observer) {
    mutations.forEach(function(mutation) {
        if($(mutation.target).find('.popover-title').text() === 'Title of my button' && $(mutation.target).find('.glyphicon-ok')){
            $(mutation.target).find('.editable-submit').html('process');
        }
    });
});
observer.observe(document, {
    subtree: true,
    attributes: true
});

不是很好，但可以。

【讨论】：