Html 选择列表：为什么会调用两次 onchange？答案

【问题标题】：Html Select List: why would onchange be called twice?Html 选择列表：为什么会调用两次 onchange？
【发布时间】：2012-02-15 20:42:59
【问题描述】：

我有一个带有选择列表的页面（ASP.NET MVC 页面）

选择列表和onchange事件指定如下：

<%=Html.DropDownList("CompanyID", Model.CompanySelectList, "(select company)", new { @class = "data-entry-field", @onchange = "companySelectListChanged()" })%>

companySelectListChanged 函数被调用了两次？

我正在使用this question 中的漂亮代码来获取调用者。

两次调用者都是 onchange 事件，但是如果我查看调用者调用者使用：

arguments.callee.caller.caller

第一个调用返回一些系统代码作为调用者（我假设），第二个调用返回未定义。

我正在检查 undefined 是否只对 onchange 做出一次反应，但这似乎并不理想，为什么会调用两次 onchange？

更新：

好的，找到了罪魁祸首！ ...除了我 :-) 但调用 companySelectListChanged 函数两次的问题仍然存在。

如上所述，onchange 事件直接设置在 select 上。这会调用 companySelectListChanged 函数。

..注意'data-entry-field'类，现在在一个单独的链接javascript文件中，该类的所有字段上的更改事件都绑定到更改保存按钮颜色的函数。也就是说onchange上有两个事件，但是companySelectListChanged被调用了两次？

附加绑定设置如下：

$('.data-entry-field').bind('keypress keyup change', function (e) { highLightSaveButtons(); });

假设选择列表上可能有 2 个更改事件，它会假设设置按键和按键事件可能会破坏某些东西？

有什么想法吗？

另一个更新：

如果我删除额外的“更改”绑定，则选择元素看起来很好并且一切正常。当添加 'change' 绑定时，该事件会触发一次，而硬连线的 'onchange' 会触发两次。

如果两个事件都通过 jQuery 绑定一切正常，那么混合硬连线的 onchange 和 jquery 绑定的更改事件似乎不能混合？我想这回答了我的问题，但似乎是 IE 的问题并将这些事件与 jquery 绑定。

【问题讨论】：

您能否将问题隔离到一个简单的应用程序中，您可以为其发布控制器和视图的完整代码？
您是否有任何其他代码使用另一种方法将事件处理程序附加到元素？您所描述的听起来像函数被注册为事件处理程序两次 - 一次在onclick 属性的直接设置中，一次通过其他机制（例如，attachEvent() 或通过框架像原型或jQuery）。
如上所述，onchange 事件直接绑定到选择列表，companySelectListChanged() 函数调用其他两个函数来制作 jquery ajax 帖子。没有其他代码绑定 onchange 事件。
作为调试或事实调查练习，您可以尝试的一件事是让处理程序向事件对象添加一个属性。在添加属性之前，它应该检查属性是否已经存在。如果这是真的，那么您知道处理程序在同一事件上被调用了两次。如果不是，那么它会因为两个单独的事件而被调用。
好吧，gutfullofbeer.net/onchange.html 是一个测试程序，带有用于 <select> 元素的“onchange”处理程序。这不会在我尝试过的任何浏览器中生成 2 个更改事件。 ASP 代码扩展后的最终 HTML 是什么样子的？

标签： javascript html asp.net-mvc

【解决方案1】：

我同意你的评价。我已经在http://gutfullofbeer.net/onchange.html 更新了我的小示例，除了 DOM 0 处理程序（具有“onchange”属性的一组）之外还包括一个 jQuery 处理程序。这似乎是一个 jQuery 错误，或者至少是 jQuery 未能处理 IE 的怪异问题。

我记录了 jQuery 票 6593。

【讨论】：

【解决方案2】：

我在使用 IE8 时也遇到了这个问题，并进行了一些更改来解决这个问题。

我没有在下拉列表中指定 onchange 事件，而是使用了 jquery.change() 事件。

标记：

@Html.DropDownList("drpList", myList, new { @class = "myClass", id = "drpList" })

脚本：

$(function () {
  $('#drpList').change(function () {
  .... your functionality
  });
});

这对我有用..希望这有帮助。

【讨论】：