CODEWITHSUNDEEP
javascriptjquery
JimEvans
JimEvans

Reputation: 27486

How do I trigger the jQuery change event using only HTML DOM methods in IE?

I've asked this question in several places, and I'm now casting the widest possible net to see if there is a resolution I can use. Given the following HTML:

<select id="test">
  <option value="">Select One...</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>

and the following jQuery event binding:

$("#test").change(function( event ) {
  console.log("Changed");
});

I would like to be able to have the change event triggered using only DOM methods. That is, I do not want to call the jQuery .change() or .trigger() methods to cause the jQuery change event to be triggered. This is within the context of a browser automation framework, which needs to automate selection of options from <select> elements on any page, and thus cannot rely on jQuery being loaded in any particular page. Furthermore, we are only interested in a solution for this problem with IE, as we are only having difficulty with that browser. Also note, that we need a solution that will work for all versions of IE from 6-9. I would like to do something like the following (deliberately IE-specific code follows):

var e = document.getElementById('test');
e.item(1).selected = true;
e.fireEvent("onchange"); // What needs to happen here to get the jQuery event to fire?

This, however, does not cause the jQuery event to be triggered. You can find a full working example of this particular issue at this link. What is the specific code I have to invoke to get this to work?

Upvotes: 3

Views: 637

Answers (1)

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76880

You could do:

var e = document.getElementById('test');
var evt = document.createEvent("HTMLEvents");
    evt.initEvent("change", true, true);
    e.dispatchEvent(evt);

fiddle here http://jsfiddle.net/a5DUE/7/ (works for me in IE9)

Upvotes: 4

Related Questions