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

问题描述

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

当我单击一个单元格以像这样编辑内联时：

它为每个单元格触发onChange事件，就好像每个单元格中的值都已更改一样。

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

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

这就是我创建表的方式

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'
        });

      });

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

这是一个显示问题的视频，以防有人想看一看。https://streamable.com/s9fzm

它会自动失去编辑模式，因为 onChange 正在触发并且我正在调用adSetsTable.rows().invalidate().draw();

标签： jquerydatatables

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

问题描述

解决方案

推荐阅读