Datatable 激活单个单元格编辑 onclick（第 2 部分）答案

【问题标题】：Datatable activate single cell editing onclick (part 2)Datatable 激活单个单元格编辑 onclick（第 2 部分）
【发布时间】：2023-03-27 02:10:01
【问题描述】：

继续我之前在这里发现的问题：

Datatable activate single cell editing onclick

我终于能够只用一个单元格在点击时激活输入字段。

我的新问题是，虽然我可以单击单个单元格并激活它，但当我使用数据表过滤器搜索或转到数据表的另一页时，单元格激活不再起作用。

$.ajax({
  url: 'api/searchVoyageInfo.php',
  type: 'POST',
  data: '',
  dataType: 'html',
  success: function(data, textStatus, jqXHR){
    var jsonObject = JSON.parse(data); 
    var table = $('#example1').DataTable({
      "data": jsonObject,
      "columns": [{ 
        { "data": "COLUMN1" },  
        { 
          "data": "COLUMN2",
          "fnCreatedCell": function (nTd, sData, oData, iRow, iCol)
          {
            $(nTd).html("<a href='#' class='checkBound"+oData.VOYID+"' id='checkBound' 
                         data-uid='"+oData.VOYID+"'>"+oData.COLUMN2+"</a>
                         <input type='text' class='editbound"+oData.VOYID+"' 
                         id='editbound' data-uid='"+oData.VOYID+"' 
                         value='"+oData.BOUND+" display: none;' />");
          }
        },
        { "data": "COLUMN3" },
        // few more columns
      }],
      "iDisplayLength": 50,
      "paging": true,
      "bDestroy": true,
      "autoWidth": true,
      "dom": 'Bfrtip',
       "buttons": [
        // some extend buttons
      ]
    });
  },
  error: function(// some stuff){
    // do some other stuff
    // this part is not important
  }
});

如果您注意到上面的 COLUMN2 部分，我在 href 的 checkBound 类中添加了一个 VOYID 值。我还将 VOYID 添加到输入的编辑绑定类中。这样做可以防止每个 checkBound 类使用下面的 onclick 事件激活输入：

$('#example1').on('click', 'tr > td > a.checkBound', function(e)
{
  e.preventDefault();
  var $dataTable = $('#example1').DataTable();
  var tr = $(this).closest('tr');
  var data = $dataTable.rows().data();
  var rowData = data[tr.index()];

  var voyid = rowData.VOYID;

  console.log(voyid);

  $('.checkBound'+voyid).hide();
  $('.editbound'+voyid).show();
});

使用以上所有方法，在数据表的第一页上，我可以成功激活单个单元格的输入 onclick。但它只适用于第一页。我无法激活任何其他页面上的输入。

我尝试将 onclick 事件从使用类切换到 id 以获得相同的结果。

我该如何解决这个问题？

【问题讨论】：

不确定，但我猜$('#example1').DataTable(…) 可能会用一个新元素替换#example1 元素，这意味着您将失去绑定到该元素的所有事件处理程序。尝试在更高级别上应用已经在使用的事件委托。
为什么投反对票？
@04FS - 奇怪的是，如果你注意到我正在安慰 voyid。在第一页上，当我激活一个单元格时，控制台会打印出 id。该单元无法在任何其他页面上激活，但控制台仍会打印出 id。如果我无法激活单元格，但控制台仍会打印 ID，这对您的初始评论有何影响？
不，如果你得到控制台输出，那不是。 “我尝试将 onclick 事件从使用类切换到 id” - 你复制了 ID checkBound，你不能这样做，a.checkBound 不会匹配任何东西，因为你的链接没有那个类，因为你将 voyid 附加到它上面。

标签： javascript php jquery datatable inline-editing

【解决方案1】：

您可以在单击事件处理程序中使用以下代码隐藏链接并显示字段

e.preventDefault();
$(this).hide().next().show();

【讨论】：

完美。这就是我一直在寻找的。谢谢，兄弟。