如何 select 来自自定义格式化程序的行 ID？

Question

当我从自定义格式化程序中单击图标 and/or link 时，我试图获取 selected 行 ID，但我无法获取它，请尽快当我点击图标时没有任何反应（你可以在 Fiddle 上看到它）。这就是我正在处理的代码的样子：

  $.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 来显示这个问题。只需 select 一个并尝试单击该图标，您就会发现什么都没有发生

Answer 1

您应该使用 "on" 而不是 "click" 来绑定事件。

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

  alert(rowid);
});

他们的区别：

"on" 可以绑定到动态元素。
"click" 只绑定创建的元素。

Answer 2

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

见Fiddle

Answer 3

使用事件委托，

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

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

$(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 时它们将存在）

如何 select 来自自定义格式化程序的行 ID？

How to select the row Id from custom formatter?

javascript

jquery

jqgrid

free-jqgrid