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 pany)", new { @class = "data-entry-field", @onchange = "panySelectListChanged()" })%>

The panySelectListChanged 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 panySelectListChanged function twice still stands.

The onchange event is set directly on the select as mentioned. This calls the panySelectListChanged 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 onchange, but the panySelectListChanged 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 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 pany)", new { @class = "data-entry-field", @onchange = "panySelectListChanged()" })%>

The panySelectListChanged 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 panySelectListChanged function twice still stands.

The onchange event is set directly on the select as mentioned. This calls the panySelectListChanged 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 onchange, but the panySelectListChanged 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.

• javascript
• html
• asp-mvc

Share Improve this question Follow edited May 23, 2017 at 10:33 CommunityBot 111 silver badge asked May 22, 2010 at 16:10 Mark RedmanMark Redman 24.6k2020 gold badges9999 silver badges152152 bronze badges 13

• Could you isolate the problem into a simple application for which you could post the full code of the controller and view? – Darin Dimitrov Commented May 22, 2010 at 18:04
• Do you have any other code that uses another approach to attaching the event handler to the element? What you describe sounds like the function is registered as an event handler twice - once in the direct setting of the onclick attribute and once via some other mechanism (for example, attachEvent() or via a framework like Prototype or jQuery). – Pointy Commented May 22, 2010 at 18:43
• The onchange event is bound directly to the select list as mentioned, the panySelectListChanged() function calls two other functions that make jquery ajax posts. no other code is binding the onchange event. – Mark Redman Commented May 22, 2010 at 18:53
• 1 Well one thing you could try, as a debugging or fact-finding exercise, would be to have the handler add a property to the event object. Before adding the property, it should check to see if the property is already there. If that's true, then you know the handler is being invoked twice on the same event. If not, then it's being invoked because of two separate events. – Pointy Commented May 22, 2010 at 20:39
• 1 Well gutfullofbeer/onchange.html is a test program with an "onchange" handler for a <select> element. That doesn't generate 2 change events in any browser I've tried. What does the final HTML look like after your ASP code has expanded it? – Pointy Commented May 23, 2010 at 12:18

 |  Show 8 more ments

2 Answers 2

Sorted by: Reset to default 3

I agree with your assessment. I've updated my small example at http://gutfullofbeer/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.