I'm working with MooTools 1.2.4 and I have a select with an event "change" that works fine in Firefox but when I try to test it in Internet Explorer 7 it gives me an error saying that the select doesn't have that property or method:
my code is as simple as:
$('zone').addEvent("change",function(E) {
alert("change");
});
I've tested this code in https://www.jsfiddle.net and it does work in IE7!!! So what am I missing here? do you think that has something to do with my version of MooTools? on the MooTools more?
Seems like you've created a custom version of mootools-core and forgot to include Element.Event in the build - http://mootools.net/core
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'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 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");
The HTML5 oninput event is supported by some modern browsers, including Firefox 3.X
However, strangely, it only seems to work with inline JavaScript:
<input id = "q" oninput="alert('blah')">
When I try to set it using JavaScript code, it doesn't fire.
var q = document.getElementById("q");
q.oninput = function(){alert("blah");};
Is this just a bug in Firefox, or is there some reason this happens?
After downloading FireFox v3.6.27 and doing some test and search. I found my previous answer was wrong.
What I got is:
the oninput event property is supported in Firefox from version 4.
So to add a event listener in this case, you can do either
<input id = "q" oninput="alert('blah')">
or
q.addEventListener('input', function(){alert("blah");}, true);
But I prefer the later way. You can find reasons in addEventListener.
Also a similar function in IE attachEvent.
I'm trying to mimic Google suggestions over here: yous-design
It works perfect in Chrome/Firefox etc. but not in IE. I googled for it and it turns out that IE doesn't support the oninput event which in the code looks like this:
el("inp").oninput=function(){
addScript("http://www.google.nl/complete/search?callback=suggest&q="+this.value);
}
Instead I would have to use the onpropertychange event for IE. But when I replace the event it still doesn't work. I think this piece of code is counteracting:
$('#inp').keydown(
function (e){
var curr = $('#test').find('.current'); etc.etc.etc.
I think the keydown(/keyup) is counteracting with the onpropertychange event. But what should I replace keydown/keyup with? Are there any other alternatives at all? Should I rewrite the code?
I would suggest that instead of onpropertychange, use onKeyUp on IE.
onpropertychange is buggy in IE and doesn't fire for all keys (delete and backspace I think).