单击一个单元格会触发该行中每个单元格的“ on change”事件

Question

我正在为我的datatables.net表使用编辑器插件。

当我单击一个单元格进行内联编辑时，如下所示：

它为每个单元格触发const jsonData = JSON.parse(data); const dayName = jsonData['day_name']; 事件，就好像每个单元格中的值都已更改一样。

onChange

这就是我创建表格的方式

  editor.field('to_date').input().on( 'change', function (e,d) {

    console.log("to_date event fired")
  });

我不确定是否可能以错误的方式启动了表？

这里是一个视频，显示了如果有人要看一下该问题的情况。 https://streamable.com/s9fzm

由于onChange正在触发并且我正在呼叫editor = new $.fn.dataTable.Editor( { data: data, table: "#adSets", fields: [ { name: "interest_id" },{ name: "interest_fb_id" },{ name: "adset_name" }, { name: "budget" }, { name: "duration", type: "select", options: [ { label: 'Daily', value: 'Daily' }, { label: 'Lifetime', value: 'Lifetime' } ] }, { type: "datetime", name: "from_date", readonly: true, format: 'MM-DD-YYYY hh:mm A' }, { type: "datetime", name: "to_date", readonly: true, format: 'MM-DD-YYYY hh:mm A' } ] } ); adSetsTable = $('#adSets').DataTable( { data: data, bPaginate: false, bFilter: false, bInfo: false, columnDefs: [ { targets: [ 0, 1 ], visible: false } ], columns: [ { title: "Interest Id", data: "interest_id", className: 'text-left'}, { title: "Interest Fb Id", data: "interest_fb_id", className: 'text-left'}, { title: "Adset Name", data: "adset_name", className: 'text-left'}, { title: "Budget", data: "budget", className: 'text-right', render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }, { title: "Duration", data: "duration", className: 'text-right'}, { title: "Start Date", data: "from_date", className: 'text-right'}, { title: "End Date", data: "to_date", className: 'text-right' } ] } ); editor.field('from_date').disable(); editor.field('to_date').disable(); // Activate an inline edit on click of a table cell $('#adSets').on( 'click', 'tbody td:not(:first-child)', function (e) { editor.inline( this, { onBlur: 'submit' }); });

，因此它会自动失去编辑模式

Answer 1

即使使用Datatables库附带的编辑功能，问题是否仍然存在？看起来可以通过cell（）。edit（）函数完成单元格编辑，如此处文档所述：

https://datatables.net/reference/api/cell().edit()

希望有帮助！

Answer 2

看起来像根据this thread

单击了预期的功能后触发了更改事件

就解决了。

更改了我正在听模糊事件的事件，因为我的问题是预期的功能。

已更改：

.input().on( 'change', function (e,d) {

收件人：

.input().on( 'blur', function (e,d) {

更改的值是在用户离开输入后提交的，因此这对于我的情况而言是完美的。

如果您仅使用文本输入，则可以使用keydown事件，但是我有下拉菜单和日期选择器输入，它们不会触发keydown事件，因此我不得不使用{{1 }}事件。