jqGrid和jquery click事件的問題

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，並在頁面上添加了帶有“確認”類的鏈接，則將觸發click事件。

有人遇到過這個嗎？

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標記分開。 我想您將HTML片段的<a class="confirm">...</a>放在服務器返回的JSON數據中。 jqGrid支持另一種存檔相同結果的方法。 您可以1）使用showlink格式化程序； 2）使用自定義格式化程序 ，該格式化程序允許根據服務器返回的數據行（請參見rowObject參數）為網格單元格創建任何HTML片段3）使用不引人注目的JavaScript（請參見代碼示例的 答案 ）4）兩者的任何混合（請參見代碼示例的另一個答案 ）。 方式3似乎讓我最接近您所做的事情。

無論如何，將JSON數據與HTML標記清晰地分開是一件好事，這不僅是因為設計原因。 它可以進一步減少從服務器發送的數據大小。 （有關更多信息，請參見此答案 ）