javascript - Internet Explorer 中的 jQuery 或 jqGrid 错误

Question

看下面的jqGrid例子

http://members.iinet.net.au/~maximg1/Demo/jqGridBug.htm

(用户名:PublicAccess，密码:12345678)

您会注意到选项按钮在默认情况下处于禁用状态，并在单击选定行时启用:

beforeSelectRow: function (ID, event) {
    $("#" + _LastSelectedRow + "_SaveButton").button("disable");
    $("#" + _LastSelectedRow + "_DeleteButton").button("disable");
    $("#" + ID + "_SaveButton").button("enable").click(function (event) {
        event.stopPropagation(); event.preventDefault();
    });
    $("#" + ID + "_DeleteButton").button("enable").click(function (event) {
        event.stopPropagation(); event.preventDefault();
    });
    _LastSelectedRow = ID;
} 

您还会注意到，在最初声明的按钮接线中，它们被禁用并接线以防止回发:

$(".DeleteButton").button({ icons: { primary: 'ui-icon-closethick' }, text: false,
     disabled: true }).css({ width: "45px" }).click(function (event) {
         event.stopPropagation(); event.preventDefault();
});
$(".SaveButton").button({ icons: { primary: 'ui-icon-check' }, text: false,
     disabled: true }).css({ width: "45px" }).click(function (event) {
         event.stopPropagation(); event.preventDefault();
}); 

在 firefox 和 chrome 中的行为完全符合预期，但是当在按钮列中单击ROW THAT IS NOT SELECTED 时，良好的旧 IE 会发出回发。单击其他列之一(如描述)时，行为符合预期。

我无法弄清楚为什么会发生这种情况，并且永远感谢任何能够阐明这种情况的人。

PS:我知道我在两个不同的点两次为按钮连接事件处理程序，这只是作为解决问题的最后一次尝试(显然没有奏效)。

Answer 1

您的主要问题是您没有指定 type您创建的按钮的属性。默认值在不同的浏览器中是不同的。如果类型是 submit你会有额外的问题。禁用提交按钮存在一些已知问题。我不确定您是否真的需要任何提交。可能只是您的习惯 click事件处理程序就足够了。如果您确实需要提交，那么您可以使用带有 type="button" 的按钮。 , 但调用表单提交

$("#form1").submit();

click 内部事件句柄。你的代码的修改版本你可以看到here .我调用$("#form1").submit()仅在 click 内部“保存”按钮的事件句柄，而不是“删除”按钮的事件句柄。表单提交的另一个缺点是重新加载页面并删除网格的选择。

此外在 the modified version of the your code我修复了一些小但重要的错误并进行了一些小的代码改进:

1. 由于使用了 grid.loader.js，您的原始代码加载了一些 jqGrid 的 JavaScript 两次除了其他development scripts .
2. 使用的原码ui.multiselect.js和 jquery.searchFilter.js 需要加载 jquery.searchFilter.css和 ui.multiselect.css还有。
3. 您的 HTML 页面应包含 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />在页眉中。
4. 使用data，您可以更有效、更轻松地加载jqGrid 的数据。 jqGrid 的参数而不是 addRowData 的用法方法。
5. 而不是使用 localReader: {id: 'ID'}你可以使用 key:true ID 的选项柱子。阅读效果更好，适用于所有 datatype值，而不仅仅是本地数据。
6. beforeSelectRow 内部你不应该使用 click绑定(bind)而不取消绑定(bind) 以前的处理程序。如果你插入 alert("in click")在您绑定(bind)的函数的当前代码中，您将看到在每次选择同一行之后 alert函数将被调用多次(两次、三次等)。因此，要修复您的代码，您应该删除任何 click在 beforeSelectRow 内部绑定(bind).你已经绑定(bind)了一个 click事件句柄在开始时出现一次(参见 $(".DeleteButton").button(...).click 内部的 gridComplete )。
7. 如我上面所述，您应该添加 type=\"button\"在您放置在 Option 中的 HTML 代码片段中专栏。
8. 因为你只设置了一个单元格值，所以最好使用setCell方法而不是 setRowData方法。
9. 您应该增加 Options 的宽度列以在 Google Chrome 浏览器的一行中查看插入的按钮。在我的修改版本中，我使用了 width:98而不是原来的width:96 .
10. 建议对 HTML 代码进行一些小的更改，以使代码成为有效的 XHTML 1.0 Transitional 或 XHTML 1.0 Strict 代码。 (见修改后页面的评论)