如何从自定义格式化程序中选择行 ID？答案

【问题标题】：How to select the row Id from custom formatter?如何从自定义格式化程序中选择行 ID？
【发布时间】：2018-01-03 21:37:42
【问题描述】：

当我单击自定义格式化程序中的图标和/或链接时，我试图获取选定的行 ID，但我无法获取它，只要我单击该图标就没有任何反应（你可以看到它在小提琴上）。这就是我正在处理的代码的样子：

  $.fn.fmatter.customActionsFormatter = function(cellValue, options, rowData) {
    return '<a href="#" class="delete_row" title="Delete selected row"><span class="fa fa-fw fa-trash-o delete_row" data-id="' + rowData.Id + '"></span></a>';
  };


  $(".delete_row").click(function() {
    var rowid = $("#list").jqGrid('getGridParam', 'selrow');

    alert(rowid);
  });

为什么这不起作用？

我创建了一个 Fiddle 来显示该问题。只需选择一个并尝试单击该图标，您就会发现什么都没有发生

【问题讨论】：

你说的是哪个图标重新加载？
@MuhammadOmerAslam 不，每行删除一个
将点击绑定包裹在$(document).ready()中，它就可以工作了
jsfiddle.net/buttflattery/rmo2370r/6

标签： javascript jquery jqgrid free-jqgrid

【解决方案1】：

使用事件委托，

取自 Jquery 学习中心https://learn.jquery.com/events/event-delegation/

事件委托允许我们将单个事件侦听器附加到父元素，它将为匹配的所有后代触发选择器，这些后代是现在存在还是被添加到未来。

$(document).on('click', '#list .delete_row', function(event) {
    event.preventDefault();
    var rowid = $("#list").jqGrid('getGridParam', 'selrow');
    alert(rowid);
})

由于 .delete_row 图标是在自定义格式化程序回调中创建的（因此附加了 Javascript），因此您正在寻找的 .delete_row 元素在您绑定事件时还不存在（它们将在 jqgrid 完成时存在渲染和触发 customFormatter）

【讨论】：

【解决方案2】：

你应该使用“on”而不是“click”来绑定事件。

$(".delete_row").on('click', function() {
  var rowid = $("#list").jqGrid('getGridParam', 'selrow');

  alert(rowid);
});

他们的区别：

“on”可以绑定到动态元素。
“点击”只绑定创建的元素。

【讨论】：

我已经尝试过了，但这不是问题，无论哪种方式，这里都有一个 updated Fiddle 显示如何也不工作
我更改了您的 JS 代码，现在可以使用：jsfiddle.net/rmo2370r/11

【解决方案3】：

您需要将click 绑定包装在$(document).ready() 中，因为当脚本尝试将click 绑定到.delete_row 类的元素上时，没有检测到任何元素，我知道您只是忽略了它，它发生。

见Fiddle

【讨论】：