在jqGrid中调用选定的行只能运行一次

Alright, this has to be something stupid but I haven't been able to spot it...

好吧，这必须是愚蠢的，但我无法发现它......

I've got a jqGrid with id "grid" (inspired, I know). I'm adding a nav button to the grid as such:

我有一个id为“grid”的jqGrid（灵感，我知道）。我正在为网格添加一个导航按钮：

jQuery("#grid").navButtonAdd('#pager', {
        caption : "Manage Files",           
        onClickButton : function(){                         
            var rowid = $('#grid').jqGrid('getGridParam', 'selrow');
            if(rowid == null) 
                alert('Please select a record before trying to manage files');
            makeUploadDialog(rowid);
        }

    });

So, this works. The first time you do it. If you click another row and hit the button again, I get this error:

所以，这是有效的。你第一次这样做。如果您单击另一行并再次点击该按钮，我会收到此错误：

Uncaught TypeError: Object [object Object] has no method 'jqGrid'

I'm guessing there's some bad mojo going on with the ordering of events, but I know I've seen this exact approach used by Oleg in a stack post (albeit a 2 year old one).

我猜测事件的排序会有一些不好的事情，但我知道我已经看到了Oleg在一个堆栈帖子中使用的这种精确方法（尽管是一个2岁的人）。

Any suggestions?

有什么建议么？

[EDIT to add more code and context]

[编辑添加更多代码和上下文]

I discovered that this problem was being triggered somehow by the AJAX loading of the content for the dialog. I've done this type of operation on other projects without an issue, so I'm confused why it would be causing me to "lose context" in this case. If I comment out the last line below...the load call, I can open and close the dialog repeatedly and maintain grid functionality. I just don't understand why...

我发现这个问题是由AJAX加载对话框的内容以某种方式触发的。我已经在其他项目上完成了这种类型的操作而没有问题，所以我很困惑为什么它会导致我在这种情况下“丢失上下文”。如果我注释掉下面的最后一行...加载调用，我可以反复打开和关闭对话框并保持网格功能。我只是不明白为什么......

function makeUploadDialog(rowID) {      
    var dialog = $('<div></div>').appendTo('body');
    dialog.dialog({
        width: 850, 
        autoOpen: true,
        draggable: true,
        resizable: false,
        title: 'Manage Artifacts',
        buttons: {
            Close: function () {
                $("#grid").trigger("reloadGrid");
                dialog.remove();                
            }
        }, 
        close: function () {                
            $("#grid").trigger("reloadGrid");
            dialog.remove();                
        }
    }); 
    dialog.load('getUploadDialog.html?rowId='+rowID);

[EDIT x2]

[编辑x2]

I've just discovered that the #grid object looks to have been corrupted somehow by the #.load? I did a console.log of the $('#grid') and can see that it is in fact missing all the jqGrid methods, but has some content that seems like it belonged in the dialog (like a reference to the MultiFile object...which is part of MultiFile.js used in the dialog itself for some file uploading). Truly perplexing.

我刚刚发现#grid对象看起来已经被＃.load以某种方式损坏了？我做了一个$（'＃grid'）的console.log，可以看到它实际上缺少了所有的jqGrid方法，但有一些内容似乎属于对话框（就像对MultiFile对象的引用一样）。 ..which是在对话框中用于某些文件上传的MultiFile.js的一部分）。真是令人困惑。

2 个解决方案

#1

I have prepared a generic working example, which triggers the selection event correctly (jsFiddle). What it basically does is adding the columns, adding some data and finally adding a function to react on the onSelectRow event as follows:

我准备了一个通用的工作示例，它正确地触发了选择事件（jsFiddle）。它基本上做的是添加列，添加一些数据，最后添加一个函数来响应onSelectRow事件，如下所示：

$("#grid").jqGrid('setGridParam', 
    {onSelectRow: function(rowid,iRow,iCol,e){alert('selected id='+rowid);}});

Click twice or more times on any row, it fires as expected.

在任何行上单击两次或多次，它会按预期触发。

As suggested by Bikonja, if your issue is more specific to the functions you have added, please modify the example I gave you by the link and post it so we can see if there is any side-effect (e.g. from other linked JavaScript libraries).

正如Bikonja建议的那样，如果您的问题更加具体到您添加的功能，请修改我通过链接给您的示例并将其发布，以便我们查看是否存在任何副作用（例如来自其他链接的JavaScript库）。

Entire JavaScript code:

整个JavaScript代码：

var data = [[12345, "ABC", "", "3454354", "OPEN"], 
    [98765, "DEF", "", "452673", "CLOSED"]];

$("#grid").jqGrid({
    datatype: "local",
    height: 250,
    colNames: ['Inv No', 'User ID', ' ', 'Number', 'Status'],
    colModel: [{
        name: 'id',
        index: 'id',
        width: 60,
        sorttype: "int"},
    {
        name: 'fld1',
        index: 'fld1',
        width: 90,
        sorttype: "date"},
    {
        name: 'fld2',
        index: 'fld2',
        width: 10},
    {
        name: 'fld3',
        index: 'fld3',
        width: 80,
        sorttype: "float"},
    {
        name: 'fld4',
        index: 'fld4',
        width: 80,
        sorttype: "float"}
    ],
    caption: "Stack Overflow Example"
});


var names = ["id", "fld1", "fld2", "fld3", "fld4"];
var mydata = [];

for (var i = 0; i < data.length; i++) {
    mydata[i] = {};
    for (var j = 0; j < data[i].length; j++) {
        mydata[i][names[j]] = data[i][j];
    }
}

for (var i = 0; i <= mydata.length; i++) {
    $("#grid").jqGrid('addRowData', i + 1, mydata[i]);
}

/*
$("#grid").jqGrid('setGridParam', 
    {ondblClickRow: function(rowid,iRow,iCol,e){alert(dbl clicked id='+rowid);}});
*/
$("#grid").jqGrid('setGridParam', 
    {onSelectRow: function(rowid,iRow,iCol,e){alert('selected id='+rowid);}});

HTML Table definition:

HTML表定义：

<table id="grid"></table>

#2

It took awhile, but I discovered the problem. The JSP I was using to populate my dialog was linking jQuery redundantly and screwing up the reference to the jQuery elements back on my main page.

花了一段时间，但我发现了问题。我用来填充对话框的JSP是冗余地链接jQuery，并在我的主页面上搞砸了对jQuery元素的引用。

Painful.

痛苦。

#1

$("#grid").jqGrid('setGridParam', 
    {onSelectRow: function(rowid,iRow,iCol,e){alert('selected id='+rowid);}});