Problem mit jqGrid und jquery click event

Question

Ich lade ein jqGrid auf meiner Seite. Das Gitter hat eine Schaltfläche Löschen für jede Zeile. Ich versuche, die Jquery UI-Dialog-Bestätigung auf meine Schaltfläche "Löschen" zu verwenden.

Hier ist mein Javascript-Code:

<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>

Ich übergebe Daten von meinem Controller an das Grid. Ich habe die Klasse "confirm" zum Link Delete für jede Zeile hinzugefügt.

Wenn ich auf die Schaltfläche Löschen klicke, passiert nichts. Der Link hat die richtige Klasse, und mein gesamtes Javascript wird korrekt geladen. Ich habe eine Warnung am Ende meiner document.ready-Funktion platziert, um sicherzustellen, dass es keine Fehler gab.

Aber wenn ich mein jqGrid auskommentiere und einen Link mit der Klasse "confirm" auf meiner Seite einfüge, wird das Click-Event ausgelöst.

Ist das schon mal jemandem aufgefallen?

Answer 1

Das Hauptproblem, das Sie haben, ist, dass Sie versuchen, die "Klick"-Bindung mit $("a.confirm").click(...) vor werden die Elemente "a.confirm" geladen.

Sie sollten den Bindungscode entweder innerhalb von loadComplete o gridComplete Ereignisbehandler oder verwenden Sie jQuery.live

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

anstelle von $("a.confirm").click(...) .

Eine weitere allgemeine Bemerkung. Die beste Praxis bei der Arbeit mit jqGrid ist die Trennung der Daten vom HTML-Markup. Ich nehme an, dass Sie das HTML-Fragment mit <a class="confirm">...</a> innerhalb von JSON-Daten, die vom Server zurückgegeben werden. jqGrid unterstützt andere Möglichkeiten, die gleichen Ergebnisse zu archivieren. Sie können 1) verwenden showlink Formatierer; 2) Verwendung benutzerdefinierter Formatierer die es ermöglichen, ein beliebiges HTML-Fragment für die Gitterzelle auf der Grundlage der Datenzeile zu erstellen (siehe rowObject Parameter), die vom Server zurückgegeben werden 3) unaufdringliches JavaScript verwenden (siehe meine Antwort con das Code-Beispiel ) 4) eine Mischung aus beidem (siehe eine andere Antwort mit dem Codebeispiel). Die Art und Weise 3 scheint mir meist nahe an das, was Sie tun.

In jedem Fall ist eine klare Trennung von JSON-Daten und HTML-Markup nicht nur aus Design-Gründen sinnvoll. Sie ermöglicht es zusätzlich, die Größe der vom Server gesendeten Daten zu reduzieren. (siehe diese Antwort für weitere Informationen)