jqGrid和jquery点击事件的问题

Question

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

这是我的javascript代码:

<script type="text/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");
        });

    }); 

</script>

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

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

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

有没有人碰到这个？

Answer 1

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

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

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

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

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

以任何方式明确地将JSON数据与HTML标记分离是好的,这不仅仅是因为设计原因.它允许额外减少从服务器发送的数据的大小.(有关更多信息,请参阅此答案)