javascript - 无法在jqGrid中添加按钮点击事件

Question

我正在尝试在 jqGrid 中单击按钮时添加 dialog 但收到 “Uncaught ReferenceError: OpenDialog is not defined” 错误。我想我已经使用了所有需要的引用资料，但没有运气。

此外，如果我在 jsFiddle 中使用相同的代码，则既不会收到任何错误也不会收到预期结果。

jsFiddle Demo

我也尝试在函数中使用 id: "QueryLink" 但没有成功。

我在这里错过了什么？

$(function() {
  "use strict";

  function OpenDialog() {
  alert("1");
    $("#myDialogBox").dialog("open");
  }

  $("#grid1").jqGrid({
    colModel: [
      {
        name: "QueryLink",
        id: "QueryLink",
        label: "Query Link",
        align: "center",
        formatter: function() {
          return "<button onclick='OpenDialog()'>Pop Up</button>";
        }
      }
    ],
    data: [{
      QueryLink: "Link"
    }],
    iconSet: "fontAwesome",
    rownumbers: true,
    sortname: "invdate",
    sortorder: "desc",
    caption: "Button Click Test"
  });
});

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.0/jquery.jqgrid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.0/css/ui.jqgrid.min.css" rel="stylesheet" />
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.6/js/jquery.jqgrid.min.js"></script>

<table id="grid1"></table>
<div id="myDialogBox" title="Basic dialog"></div>

Answer 1

首先请注意，您在 jQuery 之前包含 jQueryUI，并且还包含多个版本的 jQuery 和 jqGrid，这会导致代码出错。您需要正确组织包含的脚本。

问题本身是因为您使用了 on* 事件属性。这意味着您调用的函数必须在 window 范围内声明，因此您需要将 OpenDialog() 移到 $(function() {}); block 。

您还需要在 #myDialogBox div 上调用 dialog() 以实例化该元素上的库。假设您想设置 autoOpen: false 以便它仅在您手动触发时打开。试试这个:

function OpenDialog() {
  alert("1");
  $("#myDialogBox").dialog("open");
}

$(function() {
  "use strict";
  
  $("#myDialogBox").dialog({
    autoOpen: false
  });

  $("#grid1").jqGrid({
    colModel: [{
      name: "QueryLink",
      id: "QueryLink",
      label: "Query Link",
      align: "center",
      formatter: function() {
        return "<button onclick='OpenDialog()'>Pop Up</button>";
      }
    }],
    data: [{
      QueryLink: "Link"
    }],
    iconSet: "fontAwesome",
    rownumbers: true,
    sortname: "invdate",
    sortorder: "desc",
    caption: "Button Click Test"
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.6/js/jquery.jqgrid.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.0/css/ui.jqgrid.min.css" rel="stylesheet" />
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css" rel="stylesheet" />

<table id="grid1"></table>
<div id="myDialogBox" title="Basic dialog"></div>

然而，更好的解决方案是删除过时的 onclick 属性并改用委托(delegate)事件处理程序，如下所示:

$(function() {
  "use strict";
  
  $("#myDialogBox").dialog({
    autoOpen: false
  });
  
  $("#grid1").jqGrid({
    colModel: [{
      name: "QueryLink",
      id: "QueryLink",
      label: "Query Link",
      align: "center",
      formatter: function() {
        return '<button class="popup-trigger">Pop Up</button>';
      }
    }],
    data: [{
      QueryLink: "Link"
    }],
    iconSet: "fontAwesome",
    rownumbers: true,
    sortname: "invdate",
    sortorder: "desc",
    caption: "Button Click Test"
  }).on('click', '.popup-trigger', function() {
    alert("1");
    $("#myDialogBox").dialog("open");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.6/js/jquery.jqgrid.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.0/css/ui.jqgrid.min.css" rel="stylesheet" />
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css" rel="stylesheet" />

<table id="grid1"></table>
<div id="myDialogBox" title="Basic dialog"></div>