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(...) 进行“点击”绑定。

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

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

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

还有一句话。使用jqGrid的最佳实践是从HTML标记中划分数据。我想你将带有<a class="confirm">...</a>的HTML片段放在从服务器返回的JSON数据中。 jqGrid支持另一种存档相同结果的方法。您可以1）使用showlink格式化程序; 2）使用custom formatter允许基于从服务器返回的数据行（参见rowObject参数）为网格单元创建任何HTML片段3）使用不引人注目的JavaScript（参见my answer with the code example）4）两者的任何组合（请参阅another answer和代码示例）。方式3似乎与我的工作大致相近。

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

jqGrid和jquery点击事件的问题

1 个答案: