I have jQuery .click(function() event handlers attached to elements that I've selected by ID
example:
$('#deletethis').click(function() {
$(this).hide()
}
within my $(document).ready but this does not work at all with Safari, just nothing happens but it works fine with Chrome, Firefox, and IE. Console reports no javascript errors. Nothing inside the .click handler gets executed at all. Is there a work around for safari to accomplish the same effect?
Nevermind, found out it was an issue with only Safari not loading the javascript file, but all other browsers are. Got to figure that out now. . .
Have you tried this?
$('#deletethis').click(function() { $(this).hide(); });
Note the extra ; and );
Put a semicolon after hide().
End the click function with a ');' after the function.
Is #deletethis a link? Possibly with href="". If so, the default action on it is to navigate to the url of the page.
You can prevent the default action by calling e.preventDefault() in the click handler.
$('#deletethis').click(function(e) {
e.preventDefault();
$(this).hide();
});
Related
My jQuery('a[data-filter=".hottop"]').click(); doesn't work together with my document.ready function. The click works fine when fired from console, and document.ready fires everything else just fine. It just doesn't trigger the click.
Can someone figure out why?
Live Page. Site isn't public yet, so please identify with stackof//123O
For some reason I can't explain why it is happening, I used to experience the same thing and I'm creating DOM elements dynamically. Could you try this
$("body").on('click', 'yourClass/ID-Element', function () {
//your codes
});
Using the following function made everything work:
$(window).load(function()
Thanks!
I've been making some basic mobile navigation and am using a click event to show/hide the menu.
A reduced code sample:
jQuery('.menu-button').click(function(){
jQuery('.header-nav').toggle();
console.log('clicked');
});
I've been remotely debugging on mobile and the console.log always works, but the .header-nav toggle() seems to randomly not trigger - I can't spot a pattern to it, but it always remains in the DOM (which it should), so it being somehow removed is not the reason why it is not firing.
Any ideas?
Thanks to Kevin B's comment it seems that the click event is firing multiple times. To fix this, the following was used:
$(element).off().on('click', function() {
// function body
});
Reference: jQuery click events firing multiple times
Trying to make a jsfiddle so I can post it on here and get some help with a problem; however, I'm having a problem getting jsfiddle to act as expected, so I'm having a problem trying to document my problem!
http://jsfiddle.net/eidsonator/he4Vc/#base
I'm trying to add a blur event handler to a input with id of "part". My alert fires as soon as the page loads (which it shouldn't) and doesn't fire when focus is lost. This behavior persists in chrome and in firefox (I'm coding for an internal web app, so I can ignore ie!)
$("#part").on('blur', alert('lost focus'));
I've changed the load method, and tried wrapping it in my own $(document).ready(function() {}); as well as using .blur() and different versions of javacript... any clues?
Thanks!
You are calling alert straight away, and passing the return value of it to the .on() method. Instead, you need to pass a reference to a function that can be invoked when the event is received:
$("#part").on('blur', function () {
alert('lost focus')
});
Here's an updated fiddle.
you have written a wrong syntax .see the docs for more info,and change your code to
$("#part").on('blur', function(){
//do something
});
basicly i need my page to respond to left and right arrow keys. so trying to have the body tag trigger an event- got it working in chrome etc, will do nothing in firefox- tried googling and after 50 different results still no dice. anyone got any ideas?
heres what i have that works with chrome-
body tag calls this script
$(document).ready(adjust());
------------------the javascript
function adjust(){
$("body").keydown(function(){arrowKey(event.keyCode);});
}
function arrowKey(k){
alert(k);
if (k==37)
alert("Left");
else if (k==39)
alert("Right");
else if (k==32)
alert("space");
}
ive replaced methods with alerts in the function for testing purpose but i need to be able to call different functions based on which arrow is pressed
Actually it works in chrome even without the "event" because event is a keyword in chrome and it is filled with the last triggered event.
The reason it doesn't work in firefox is because you should assign the event like this:
$(document).keydown(function(event){arrowKey(event.keyCode);});
For some reason "body" does not accept the keydown event. Hope it helps.
$("body").keydown(function( ){arrowKey(event.keyCode);});
^
event is missing perhaps
$("body").keydown(function(event){arrowKey(event.keyCode);});
On JSFIDDLE.
Ok Why You don't use JavaScript
window.body.onkeydown=function(evt)
{
arrowKey(evt.keyCode);
}
I'm trying to have an element which support both click and double click on it. But the following example works in IE but does not work in FireFox 3.5.6:
<button onclick="c=setTimeout('alert(1);',1000);" ondblclick="clearTimeout(c);alert(2);">Test</button>
It just doesn't clear timeout, so alert(1) is being fired.
Does anyone know what is the issue?
How I can have click and double click events separately in FireFox?
When you double-click in Firefox, you get two click events and then a dblclick event. So you're setting two timers and clearing one. Clearing the timer on the click event should work:
<button onclick="clearTimeout(c);c=setTimeout('alert(1);',1000);" ondblclick="clearTimeout(c);alert(2);">Test</button>
You really shouldn't be inlining your javascript in your HTML. I would suggest using a JavaScript library like jQuery for this. jQuery will solve the cross browser event issues that you are having!
$(document).ready(function() {
var c;
$("button").click(function() {
c = setTimeout(function() {
alert(1);
}, 1000);
}).dblclick(function() {
clearTimeout(c);
alert(2);
});
});
I don't get it. It still doesn't work. I mean, if you put a clerTimeout in the onclick event the onclick event wont work since you stop it before you have finished it :S
Actually I don't see how you could say "This fixed the issue" ?? Just try and copy that very code you wrote and you'll realise that nothing happends... :/