jqGrid - функция редактирования никогда не вызывается

Question

У меня проблема с JQGrid при использовании ASP.NET MVC. Я пытаюсь следовать этому примеру (после того, как вы перейдете по этой ссылке, в левой части страницы нажмите Live Manipulation, затем Edit Row), но моя функция редактирования никогда не вызывается ( то есть он никогда не попадает в $("#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 никогда не устанавливается.