jqGrid和jquery点击事件的问题

我在我的页面上加载了一个jqGrid。 网格每行都有一个删除按钮。 我正在尝试在“删除”按钮上使用jquery UI对话框确认。

这是我的javascript代码：

 $(document).ready(function () { $("#list").jqGrid({ url: '/MyController/MyFunction/', datatype: 'json', mtype: 'POST', colNames: ['', 'Name', ''], colModel: [ { name: 'Edit', index: 'Edit', width: 40, align: 'left', sortable: false }, { name: 'Name', index: 'Name', width: 120, align: 'left' }, { name: 'Delete', index: 'Delete', width: 50, align: 'left', sortable: false }], pager: $('#pager'), rowNum: 10, rowList: [10, 20, 50], sortname: 'Name', sortorder: "asc", viewrecords: true, width: 700 }); $("#dialog-confirm").dialog({ autoOpen: false, modal: true, buttons: { "Delete": function () { window.location.href = $(this).attr("href"); ; }, Cancel: function () { $(this).dialog("close"); } } }); $("a.confirm").click(function () { alert("HELLO"); //$("#dialog-confirm").dialog("open"); }); });  

我将数据从我的控制器传递到网格。 我在每行的删除链接中添加了“确认”类。

如果我点击我的删除按钮，则没有任何反应。 该链接具有正确的类，并且我的所有JavaScript都正确加载。 我在document.ready函数的末尾发出警告，以确保没有错误。

但是如果我注释掉我的jqGrid并在我的页面上添加了一个“确认”类的链接，那么点击事件将会触发。

有没有人碰到这个？

Answer 1

您遇到的主要问题是您尝试使用$("a.confirm").click(...)进行“click”绑定$("a.confirm").click(...)在加载元素“a.confirm” 之前 $("a.confirm").click(...) 。

您应该将绑定代码放在loadComplete或gridComplete事件处理程序中，或者使用jQuery.live

 $("a.confirm").live('click', function() { alert("HELLO"); //$("#dialog-confirm").dialog("open"); }); 

而不是$("a.confirm").click(...) 。

再一般的评论。 使用jqGrid的最佳实践是从HTML标记中划分数据。 我想你在服务器返回的JSON数据中放置了带有... HTML片段。 jqGrid支持另一种存档相同结果的方法。 你可以1）使用showlink formatter; 2）使用自定义格式化程序 ，允许基于从服务器返回的数据行（参见rowObject参数）为网格单元创建任何HTML片段3）使用不引人注目的JavaScript（参见我的答案和代码示例 ）4）两者的任何混合（参见代码示例的另一个答案 ）。 方式3似乎我大多接近你所做的。

以任何方式将JSON数据与HTML标记明确分开是好的，这不仅仅是因为设计原因。 它还允许减少从服务器发送的数据的大小。 （有关更多信息，请参阅此答案 ）