Проблема с jqGrid и событием jquery click

Question

Я загружаю jqGrid на мою страницу.Сетка имеет кнопку Удалить для каждой строки.Я пытаюсь использовать диалоговое окно подтверждения jquery UI на моей кнопке Delete.

Вот мой код 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

Основная проблема, с которой вы столкнулись, заключается в том, что вы пытаетесь связать 'click' с $("a.confirm").click(...) до , когда элементы "a.confirm" загружаются.

Вы должны либо поместить код привязки в 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) использовать пользовательский форматер , позволяющий создать любой HTML-фрагмент для ячейки сетки на основе строки данных (см. Параметр rowObject), возвращенной с сервера. 3) использовать ненавязчивый JavaScript (см. мой ответ). с примером кода ) 4) любой микс из обоих (см. другой ответ с примером кода). Способ 3 кажется мне в основном близким к тому, что вы делаете.

В любом случае четкое отделение данных JSON от разметки HTML хорошо не только по причине дизайна. Это позволяет дополнительно уменьшить размер данных, отправляемых с сервера. (см. этот ответ для получения дополнительной информации)