Html Select List: why would onchange be called twice?

I have a page with a select list (ASP.NET MVC Page)

The select list and onchange event specified like this:

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

The companySelectListChanged function is getting called twice?

I am using the nifty code in this question to get the caller.

both times the caller is the onchange event, however if i look at the callers caller using:

arguments.callee.caller.caller

the first call returns some system code as the caller (i presume) and the second call returns undefined.

I am checking for undefined to only react once to onchange, but this doesnt seem ideal, whcy would onchange be called twice?

UPDATE:

ok, found the culprit! ...apart from me :-) but the issue of calling the companySelectListChanged function twice still stands.

The onchange event is set directly on the select as mentioned. This calls the companySelectListChanged function.

..notice the 'data-entry-field' class, now in a separate linked javascript file a change event on all fields with this class is bound to a function that changes the colour of the save button. This means there is two events on the onc开发者_运维知识库hange, but the companySelectListChanged is called twice?

The additional binding is set as follows:

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

Assuming its possible to have 2 change events on the select list, its would assume that setting keypress & keyup events may be breaking something?

Any ideas?

ANOTHER UPDATE:

The select element looks fine and all works if I remove the additional 'change' binding. when the 'change' binding is added that event fires once and the hard-wired 'onchange' is fired twice.

If both events are bound via jQuery all works ok, it seems that mixing hard-wired onchange and jquery bound change events cannot be mixed? I guess this answers my question but seems like an issue with IE and binding these events with jquery.

---

I agree with your assessment. I've updated my small example at http://gutfullofbeer.net/onchange.html to include a jQuery handler in addition to the DOM 0 handler (the one set with the "onchange" attribute). It appears to be a jQuery bug, or at least a failure of jQuery to deal with the IE weirdness.

I logged jQuery ticket 6593.

---

I also encountered this issue when using IE8 and made some changes to fix this.

Instead of specifying the onchange event on the dropdownlist, I used the jquery.change() event.

Markup:

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

Script:

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

This works for me.. Hopes this help.