jqGrid - 编辑功能永远不会被调用

Question

我在使用 ASP.NET MVC 时遇到了 JQGrid 问题。我正在尝试关注this 示例（转到该链接后，请在页面左侧单击实时数据操作，然后单击编辑行），但我的编辑功能永远不会被调用（即它永远不会被调用）进入$("#bedata").click(function()。有谁知道可能是什么问题？

    <script type="text/javascript">
        var lastsel2;

        jQuery(document).ready(function() {
            jQuery("#editgrid").jqGrid({
                url: '/Home/GetMovieData/',
                datatype: 'json',
                mtype: 'GET',
                colNames: ['id', 'Movie Name', 'Directed By', 'Release Date', 'IMDB Rating', 'Plot', 'ImageURL'],
                colModel: [
                  { name: 'id', index: 'Id', width: 55, sortable: false, hidden: true, editable: false, editoptions: { readonly: true, size: 10} },
                  { name: 'Movie Name', index: 'Name', width: 250, editable: true, editoptions: { size: 10} },
                  { name: 'Directed By', index: 'Director', width: 250, align: 'right', editable: true, editoptions: { size: 10} },
                  { name: 'Release Date', index: 'ReleaseDate', width: 100, align: 'right', editable: true, editoptions: { size: 10} },
                  { name: 'IMDB Rating', index: 'IMDBUserRating', width: 100, align: 'right', editable: true, editoptions: { size: 10} },
                  { name: 'Plot', index: 'Plot', width: 150, hidden: false, editable: true, editoptions: { size: 30} },
                  { name: 'ImageURL', index: 'ImageURL', width: 55, hidden: true, editable: false, editoptions: { readonly: true, size: 10} }
                ],
                pager: jQuery('#pager'),
                rowNum: 5,
                rowList: [5, 10, 20],
                sortname: 'id',
                sortorder: "desc",
                height: '100%',
                width: '100%',
                viewrecords: true,
                imgpath: '/Content/jqGridCss/redmond/images',
                caption: 'Movies from 2008',
                editurl: '/Home/EditMovieData/',
                caption: 'Movie List'
            });
        });

        $("#bedata").click(function() {
            var gr = jQuery("#editgrid").jqGrid('getGridParam', 'selrow');
            if (gr != null)
                jQuery("#editgrid").jqGrid('editGridRow', gr, { height: 280, reloadAfterSubmit: false });
            else
                alert("Hey dork, please select a row");
        });            
    </script>

相关的 HTML 在这里：

<table id="editgrid">
</table>
<div id="pager" style="text-align: center;">
</div>
<input type="button" id="bedata" value="Edit Selected" />

Answer 1

由于我在您的示例代码中没有看到它，您需要从 jQuery ready 事件中调用所有这些：

jQuery(document).ready(function($) {

    var lastsel2;

    jQuery(document).ready(function() {
    ...
});

否则您的代码可能会在 DOM 准备好之前执行，这可以解释为什么您的 click 处理程序永远不会设置。