This function fires in firefox/chrome :
$(document).on("reset", "form", function(){
alert("working");
});
What alternatives are out there for IE (I have 8 installed so I'd like to make it work from 8 onwards).
Try attaching the event handler directly to your form:
$(document).ready(function(){
$("form").bind("reset", function(e) {
alert("working");
});
});
This apparently works for multiple browsers including IE8.
Your method may not be working because of how IE8 handles event propagation... From jQuery documentation:
In Internet Explorer 8 and lower, the paste and reset events do not bubble. Such events are not supported for use with delegation, but they can be used when the event handler is directly attached to the element generating the event.
Related
I am using jQuery .ready function to add some ajax calls on text input to my registration page's TextBoxes.
It's all working fine on Chrome, Firefox and Safari, but won't work on Internet Explorer (I'm using IE11).
This is the code I'm using on $(document).ready():
$(document).ready(function () {
$(reg_user).on('input', function (e) { ValidateEmailPass(reg_user); });
$(reg_pass).on('input', function (e) { ValidateEmailPass(reg_pass); });
$(reg_email).on('input', function (e) { ValidateEmailPass(reg_email); });
$(reg_age).on('input', function (e) { ValidateEmailPass(reg_age); });
});
It fires the validation function every time the text changes in them. Although, I IE, it tells me reg_user is undefined which causes an error and it won't trigger these functions.
I'm using jQuery 1.11.3 which supports old versions.
If you know how to fix it, please tell me. I don't know what's really causing this problem. I think IE acts otherwise with $(document).ready().
Replace
$(reg_user)
with right element(s) selector (ID or Class). You can't create link (var reg_user) to DOM element before DOM will ready.
P.S. Also IE11 has some problems with input event.
Here's a good read.
The oninput event is supported in Internet Explorer from version 9. If
you need an event that fires when the contents of these elements are
modified in Internet Explorer before version 9, use the
onpropertychange event.
So instead, you could use change - which as the comments suggest doesn't do exactly the same, but it is cross-browser compatible. Also, you should use valid selectors instead of a global variable. This is simply bad practice and I don't know how this behaves on all browsers.
I am trying to add event handlers to the option elements contained inside a select box.
The relevant code is as follows:
$(document).ready(function(){
$('.custom_select_option_1').mousedown(function(event){
event.preventDefault();
var opt= event.target;
var scroll_offset= opt.parentElement.scrollTop;
opt.selected= !opt.selected;
opt.parentElement.scrollTop= scroll_offset;
update_selections(opt.parentElement);
});
$('.custom_select_option_1').mousemove(function(event){
event.preventDefault();
});
});
My code works fine in Chrome, but in IE-9 the default event handlers are invoked instead.
How can I adapt this code so that it works in IE-9?
Unfortunately, Internet Explorer does not support the mousedown event for option elements.
A list of the events it does support can be found here. To do this in IE, you have to implement your own select box with JS/CSS using some other type of elements besides <option> and <select>.
I suggest using <ul> and <li>.
I have following code to capture keydown event. This works fine in all browsers GC,FF,IE8 except IE9 and IE10.
$(_inputSelector, $('td', 'table')).live("keydown", function (event) {
// some client side logic
});
the selector is returning me dom elements properly but its just the event which is not trigger once the code is executed. please advise. thanks
It appears that event.stopPropagation() in a checkbox click event prevents the associated change event from firing in IE before IE9.
(The following code is in jsFiddle)
<input type="checkbox" value="Y" checked>Test
<div id="output">Logging...</div>
With the following jquery block the change event doesn't fire in IE8 and earlier but it does fire in IE9 (and Chrome):
$(document).ready(function() {
$("input").click(function(event) {
event.stopPropagation();
$("#output").append("<pre>click</pre>");
});
$("input").change(function(event) {
$("#output").append("<pre>change</pre>");
});
});
Chrome and IE9 give:
Logging...
change
click
change
click
change
click
Whereas IE8 and earlier gives:
Logging...
click
click
click
However, if I put specific 'before IE9' handling then all works as expected:
With the following jquery block:
$(document).ready(function() {
$("input").click(function(event) {
event.stopPropagation();
$("#output").append("<pre>click</pre>");
// fix event bubbling before IE9
if ($.browser.msie) {
if (parseInt($.browser.version, 10) < 9) {
$(this).trigger("change");
}
}
});
$("input").change(function(event) {
$("#output").append("<pre>change</pre>");
});
});
Is this expected behaviour?
This is a well-known IE8 bug which has nothing to do with event bubbling: the change event only fires on checkboxes when the focus leaves them.
(Compiling the comments on Tgr's answer so I can accept an answer.)
If the "event.stopPropagation()" line is removed from the click event the change event is fired as expected in IE8, so this isn't the well-known IE8 bug mentioned by Tgr.
#Tgr confirmed that:
jQuery tries to normalize most browser quirks, including this one: it simulates a change event on click and eats the one fired on blur (see jQuery.event.special.change). stopPropagation probably interferes with that.
I am trying to add an event handler on a page through javascript. What I tried is as follows,
var span=document.getElementById("WD67");
span.setAttribute("onchange","alert('hello');");
But though the event handler attribute gets added, it doesn't fire when the page is viewed in IE, however in Firefox it works properly. How do I get IE to recognize it?
var span = document.getElementById("WD67");
span.onchange = function(){ alert('hello'); };
Don't use attributes for that. The best way to add event handlers is using addEventListener (all modern browsers) or attachEvent (IE<9). Furthermore, use a handler function reference (wrap alert('hello') in a function).
A crossbrowser function to add handlers to elements:
function addHandler(obj,htype,fn){
if (obj.addEventListener){
obj.addEventListener(htype, fn);
} else {
obj.attachEvent('on'+htype,fn);
}
}
// usage
var mySpan=document.getElementById("WD67");
addHandler(mySpan,'change',function(){alert('hello')});
See also: this jsfiddle