最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Issue with jqGrid and jquery click event - Stack Overflow

programmeradmin0浏览0评论

I'm loading a jqGrid on my page. The grid has a Delete button for each row. I'm trying to use the jquery UI dialog confirmation on my Delete button.

Here's my 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>

I'm passing in data from my controller to the grid. I have the class "confirm" added to the Delete link for each row.

If I click on my Delete button, nothing happens. The link has the correct class, and all my javascript is loading correctly. I placed an alert at the end of my document.ready function to make sure there were no errors.

But if I ment out my jqGrid and add a link onto my page with the class "confirm", the click event will fire.

Has anyone ever run into this?

I'm loading a jqGrid on my page. The grid has a Delete button for each row. I'm trying to use the jquery UI dialog confirmation on my Delete button.

Here's my 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>

I'm passing in data from my controller to the grid. I have the class "confirm" added to the Delete link for each row.

If I click on my Delete button, nothing happens. The link has the correct class, and all my javascript is loading correctly. I placed an alert at the end of my document.ready function to make sure there were no errors.

But if I ment out my jqGrid and add a link onto my page with the class "confirm", the click event will fire.

Has anyone ever run into this?

Share Improve this question edited Jan 29, 2011 at 23:06 Oleg 222k35 gold badges412 silver badges812 bronze badges asked Jan 29, 2011 at 21:34 StevenSteven 18.9k74 gold badges204 silver badges303 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 7

The main problem which you have is that you try to make 'click' binding with $("a.confirm").click(...) before the elements "a.confirm" are loaded.

You should either place the binding code inside of loadComplete or gridComplete event handler or use jQuery.live

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

instead of $("a.confirm").click(...).

One more general remark. The best practice working with jqGrid is dividing data from the HTML markup. I suppose that you place HTML fragment with <a class="confirm">...</a> inside of JSON data returned from the server. jqGrid supports another ways to archive the same results. You can 1) use showlink formatter; 2) use custom formatter which allow create any HTML fragment for the grid cell based on the row of data (see rowObject parameter) returned from the server 3) use unobtrusive JavaScript (see my answer with the code example) 4) any mix from both (see another answer with the code example). The way 3 seems me mostly close to what you do.

In any way having clear separation of JSON data from HTML markup is good not only because of design reason. It allows additionally reduce the size of data send from server. (see this answer for more information)

发布评论

评论列表(0)

  1. 暂无评论