X-Editable：将事件附加到数据更改

Posted 2023-05-08

【中文标题】X-Editable：将事件附加到数据更改

【英文标题】：X-Editable: Attach event to data change

【发布时间】：2014-03-31 23:40:50

【问题描述】：

如何将事件附加到使用 XEditable 完成的字段中的任何数据更改？如果没有，是否有任何其他插件允许这种行为？

【问题讨论】：

这个文件是vitalets.github.io/x-editable/demo.html 会帮助你吗？？？

不...所拥有的只是它们支持的元素类型，而不是如何将事件附加到数据更改...尝试在文档中搜索，但没有帮助

您能否更准确地说：您是否希望在用户更改数据而不保存时触发事件？还是保存后更改数据？ （忽略未更改的保存数据）它是用于输入文本吗？或日期选择器？ ...

我对用户更改数据时触发事件感兴趣，无论该数据是否已保存（保存正在发送到我不关心的服务器），我对 UI 级别的事件感兴趣

【参考方案1】：

我正在使用Angular-xeditable，我也可以绑定事件并添加其他属性。 将e-onChange="alert('I am Fired')" 添加到您需要的 HTML 标记中。 例如：

<a href="#" editable-text="user.name" e-onChange="alert('I am Fired')" e-style="color: green" e-required e-placeholder="Enter name">

http://jsfiddle.net/cg3pLmed/

通过 javascript

$('#username').on('save', function(e, params) 
     alert('Saved value: ' + params.newValue);
);

提交新值时触发。您可以使用$(this).data('editable') 访问可编辑实例。检查以下链接中的事件 http://vitalets.github.io/x-editable/docs.html

【讨论】：

OR $('#username').on('save', function(e, params) alert('保存的值: ' + params.newValue); ); ：@wolffer-east

这并没有显示如何在您的控制器上调用代码。似乎在 e-onChange 内部，您无法访问控制器，而这是大多数应用程序在更改后实现复杂应用程序逻辑所需要的。

【参考方案2】：

您可以使用e-ng-change 来添加这样的回调：

<span editable-select="user.status" e-name="status" 
    e-ng-change="onStatusChanged($data)" 
    e-ng-options="s.value as s.text for s in statuses">

这是一个小提琴，状态选择框将触发控制器方法onStatusChanged：

http://jsfiddle.net/NfPcH/9713/

【参考方案3】：

您可以在没有 Angular 的情况下使用基本 X-Editable 的成功或错误回调函数。 见http://vitalets.github.io/x-editable/docs.html#editable