Question

当我点击自定义格式化程序中的图标和/或链接时，我正在尝试获取所选的行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。只需选择一个并尝试点击您将看到没有发生的图标

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绑定到类.delete_row的元素上时，没有检测到任何元素，我知道你只是忽略了它，它发生了。

请参阅the code

Answer 3

使用事件委托，

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

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

$(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）

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

3 个答案: