jQuery click event not working IE7 and IE8 - javascript

The following code in IE7 or IE8 doesn't work. Is this a bug? It works fine in IE6 (Incredible!)
http://jsfiddle.net/zgSmT/

Try using the live event, or binding the event after document load:
$('#clickme').live('click', function(){
alert('hey');
});
Also, you're still loading scripts.js, which doesn't exist, in your fiddle example - that might also cause a problem.

You might try
$().ready(function ()
{
$('#clickme').live('click', function(){
alert('hey');
});
}
To ensure everything is loaded.

Related

jQuery document ready not working properly on IE

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.

JQuery selector not working on firefox

I have a problem with this jquery selector in Firefox but in Chrome works OK. I'm attaching this event handler after an ajax call. I also tried with live() insted of on() but the same happened... it worked fine in Chrome but not in Firefox.
The firefox version is 24.0.
Here is my code:
$("#paginationlinks > li > a").on("click",function(){
alert("hello world");});
Firefox requires clicks to have an argument for what is getting clicked on if you want to reference it later (like you would with .preventDefault):
$("#paginationlinks > li > a").on("click",function(event){
event.preventDefault;
alert("hello world");
});
Notice the event in function(event)
Fiddle working in Firefox: http://jsfiddle.net/hCE6h/
Fiddle not working in Firefox: http://jsfiddle.net/hCE6h/1/
Chrome doesn't care either way.
You might try this by using children() selector and use of on()'s second parameter to specify a selector (rather than using > to specify direct descendants):
$("#paginationlinks").children("li").on("click", "a", function(){
alert("hello world");
});
http://api.jquery.com/on/

window.unload not working in jquery

Here I have an anchor tag in my html page which will go to Google when I click. I have a jQuery function which needs to be fired when the page leaves.
$(window).unload(function(){
alert('fffffffff');
});
I found this works fine in a video tutorial. But it's not working for me. Using firefox. help
Its working fine, you just need to remove the alert, as some browsers don't allow alert on unload event.
$(window).unload(function(){
console.log("hello");
});
try this http://jsfiddle.net/vyMdF/
Just run it again and you can check the console.
You can refer over here $(window).unload is not firing
window.onbeforeunload = function() {
return "Are you sure you wish to leave the page?";
}

bind .keyup to dynamically created element

I have seen a bunch of questions on this but im still stumped. I could realy use some help understanding what im doing wrong here.
(my terminology may not be correct below)
I have a textarea and a .keyup function bound to it by class name
This first textarea fires the function fine
I then add a second textarea dynamically which is intended to fire the same function
My .keyup function
$('.trans').keyup(function() {
alert("Working");
});
I understand that the above doesnt work on the newly created textarea because it wasnt part of the DOM when the function was bound. I have tried several ansers to other questions but cant seem to get this working:
Other things Ive tried:
// I also tried this
// Neither textarea responds if this is used
$('.trans').on('keyup', '.newTrans', function() {
alert("Working");
});
// I also tried this
// Only the first textarea responds
$('.trans').delegate('.newTrans', 'keyup', function(){
alert("Working");
});
Here is a JSfiddle with more of the code im using if needed:
jSfiddle
The .on() method isn't going to work in your fiddle at all because you have specified an old version of jQuery from before .on() was introduced.
If you upgrade to a newer version of jQuery (at least 1.7) you can do this:
$(document).on('keyup', '.trans', function() {
alert("Working");
});
Demo: http://jsfiddle.net/VFt6X/4/
If you need to keep using v1.6.4 for some reason then use the .delegate() method instead:
$(document).delegate('.trans', 'keyup', function() {
alert("Working");
});
Demo: http://jsfiddle.net/VFt6X/5/
Note that either way the '.trans' selector for the elements you care about is passed as a parameter to the function. The $(...) part on the left has to specify some container that already exists. I've used document, but it is better to specify something closer to the elements in question if possible, so in your case you could use $("#centerNotes").
Try this:
$('.trans').live('keyup', function() {
alert("Working");
});
http://jsfiddle.net/VFt6X/3/

jQuery triggering custom event is causing unknown runtime error in IE

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");

Categories

Resources