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.
Related
I'm trying to get the following code to work in all versions of IE, as it works find in other browsers:
Click Me
//Javascript
$(".specificClass").click(
function(e) {
e.preventDefault();
// Do Something
//return false; Doesn't work either
}
);
Switching to href="#" makes it try to go to the top of the page, again only in IE9. For example:
Leaving href="" redirects to the current link itself in IE9.
Click Me Two
It seems like both approaches triggers the onclick Javascript to be called, but the default behavior for href="" is not getting overridden. If I use event.preventDefault() nothing happens.
The below approach works:
Click Me Two
function doSomething(me) {
// event.preventDefault is not needed as the javascript is added via href
}
However I don't want to have href="javascript:" or onclick ="doSomething"for all my anchor tags just to get it to work in IE9.
I also don't want to use a different tag (tried the span tag for example) since it is tricky to style up in all browsers.
Any other ideas?
Looks like it is a legit bug, I have submitted a request to fix it. I have also put in a workaround for now:
https://connect.microsoft.com/IE/feedback/details/812247/event-preventdefault-or-return-false-dont-work-in-ie9
In IE9 the legacy event handler model is still partial used. preventDefault() works only, when the event listener is attached using addEventListener().
If you want to prevent default action from an inline handler, you have to use the legacy method:
event.returnValue = false;
event.cancelBubble = true; // This is affects like event.stopPropagation() in older IEs
Though jQuery not working is odd, I've no explanation for that... Unless you're running IE in compatible mode and use jQuery 2.X?
EDIT
Also a reference to console object will break the code in IE<10, if Dev Tools are not opened. You can find a lot of fixes for this problem at SO. My favorite is this:
// The very first lines in the global context
if (!window.console) {
window.console = {
log: function () {}
// Add other console methods, if the scripts on the page are using them
}
}
Though the console problem can be avoided with the code above, it's always better to remove all loggings from the final code to be published.
For IE9, if there is any console.log anywhere on the site, there will be unexpected behavior unless you have the developer tools open. Improbable for an actual user.
See how it works fine without any console.log (in IE9): jsfiddle.net/4hfjq/10, but not when you do: jsfiddle.net/4hfjq/20 tries to re-direct to "" page, unless you have the developer tool open.
In my case, there were just too many console.logs and so I go with another workaround, i.e. Use
Link and define that code without using JQuery .eventType approach. Check this: jsfiddle.net/4hfjq/22
This could be due to event bubbling.
See this link:
http://api.jquery.com/event.stopPropagation/
event.stopPropagation();
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
I am using below code to bind a custom event to an element.
jQueryelement.bind("custom",{}, function(){});
and i am trying to trigger this with
jQueryelement.trigger("custom");
This is working fine in Firefox. But causing unknown runtime error in IE. Please help me in this. TIA
I'm using jQuery v1.5.2
Using bind() and trigger() in jQuery 1.5.2 seems to work fine. My guess is there is some other code in your app which is causing this.
DEMO - works in FF, Chrome, IE9, IE8/IE7 combatibility mode and IE quirks mode
Demo uses this code:
$('body').bind('custom', {}, function(){
alert("Well, Hello!")
});
$('body').trigger('custom');
For completeness as of JQuery 1.7 (I know this question relates to JQuery 1.5.2) you are better to use on(). If you are using it as an event for the whole page use something like:
$(document).on("custom", function() {
alert("Triggered!");
});
$.event.trigger("custom");
or if you are triggering on an element:
$(".myElement").on("custom", function() {
alert("Triggered!");
});
$(".myElement").trigger("custom");
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
I have the following jQuery which works in all major browsers except Opera:
jQuery(document).ready(function () {
jQuery("#GetResults").live("click", function(e){
e.preventDefault(); //Opera doesn't execute anything here
});
};
Which is supposed to fire when clicking the following link:
<a id="GetResults" href="Folder/File/javascript:void(0);">Get Results</a>
Only Opera ignores this. Any ideas?
Edit:
I've just discovered that if I substitute out .live() for .bind() everything functions as expected. I can't find any documentation relating to .live() bugs in Opera though, and it does work in jsFiddle which would point at something environmental. What could be causing this behavour?
This needs clarification. The answers above are correct, but nobody clearly explained where your problem comes from.
In fact I think that you could probably reproduce the problem in other browsers too.
That's because of how .live works:
It binds to the event on document and waits for a particular event to bubble up to there. Then it checks if the event.target is what you wanted to handle. *
If you click on a link element it's quite possible that the browser goes to the new page before the event bubbles high enough to trigger your code. In an app with lots of HTML and event handlers all the browsers should have problems. Opera just starts displaying the new page and destroys the previous quicker in this case. It really depends on a particular situation more than on the browser. For example: you probably won't see this happen if you had a high network latency while connecting to the site.
To prevent default action on a a element you have to use .bind like in the old days ;) when a eveloper had to be aware of what he loads with AJAX and bind new events to that in a callback.
* There is more to that and .live is more complicated. I just described what is needed here.
What happens when you attach the handler using:
$ (something).bind ("click", function (e) {
// do something
})
You can also try to attach the handler using .click() method.
The following code works as expected in Opera 11.50.
<!doctype html>
<title></title>
<a id="GetResults" href="http://google.com">Get Results</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
jQuery(document).ready(function () {
jQuery("#GetResults").live("click", function(e){
alert('doing something');
e.preventDefault(); //Opera doesn't execute anything here
});
});
</script>
Either it is a corrected bug, or something more subtle.
Can you check whether the above works on your version of Opera / jQuery?
Read this article: http://jupiterjs.com/news/why-you-should-never-use-jquery-live
try use delegate instead
Not sure if you want to do it, or if it will work for you. I had similar issues with Opera 9.5 and e.preventDefault() not working, the only solution I found was to just return false...
jQuery(document).ready(function () {
jQuery("#GetResults").live("click", function(e){
e.preventDefault();
return false;
});
};
There are two aspects of an event bubbling worth considering in this case: propagation and the default action.
Propagation refers to the event bubbling. First the anchor tag gets the click event, then its parent element, then its parent's parent, and so forth, up to the document element. You can stop an event from propagating at any time by calling e.stopPropagation().
The default action is what the browser will do if nothing is done to prevent it. The most well-known case is when an anchor with an href is clicked, the browser will try to navigate there. There are other examples too, though, for example when you click and drag an image, many browsers will create a ghost image you can drop on another application. In both cases, you can stop the browser from doing the default action at any time by calling e.preventDefault()
As mentioned in other answers to this question, jQuery's .live() feature sets a handler at a high level element (like document) and takes action after events have propagated up. If a handler in between the anchor and the document calls e.stopPropagaiton() without calling e.preventDefault() it would stop the live handler from responding, while still allowing the browser to navigate (the default action).
I doubt this is what's happening, since it would affect all browsers, but it's one possible explanation.
Ensure that document.ready event happens before you click on link.
Try to put all lives in the top of the document.ready wrapper. It may help, if you have a lot of javascript code.