I cannot get the following simple jQuery to work. I know I am overlooking something, so please help me out. Here is the code at http://jsfiddle.net/Z5waA/. It's a simple click the button, then alert with jQuery.
preventDefault(e); should be e.preventDefault();
code should be like this,
$('#submitResetPass').bind('click', function(e) {
e.preventDefault();
alert("hello");
});
and you need to add jQuery reference.
You had a couple issues. First, the jsFiddle wasn't set for jQuery. Then, your call to preventDefault wasn't correct. It works here: http://jsfiddle.net/jfriend00/v9aVb/.
$('#submitResetPass').bind('click', function(e) {
e.preventDefault();
alert("hello");
});
Use e.preventDefault() instead of preventDefault(e).
Related
I am creating a responsive menu: Codepen Demo
To avoid the page to be reloaded when I click a link I have:
$('nav.menu a[href="#"]').click(function () {
$(this).preventDefault();
});
But this does not seem to work. When I click a button the menu disappears.
Does anyone knows what I am be doing wrong?
It's not the element that need a .preventDefault(), its the click event.
Try this:
$('nav.menu a').click(function (event) {
event.preventDefault();
// or use return false;
});
I don't recommend to use the href as selector though, better to give it an id or name.
From MDN, about .preventDefault():
Cancels the event if it is cancelable, without stopping further propagation of the event.
You can read more here:
MDN: event.preventDefault()
jQuery: Selectors
There is a CSS way, using pointer-events.
So by using in the CSS pointer-events: none; all click will be ignored. This is a "recent" alternative and suported in IE11+, Firefox 3.6+, Chrome 2.0+, Safari 4+.
Example
Here is very easy way to do it inside html.
<a class="font-weight-bold" href="javascript:void(0);"> Click Here </a>
Just return false.
$('nav.menu a[href="#"]').click(function () {
return false
});
Use like that:
$('nav.menu a[href="#"]').click(function (event) {
event.preventDefault();
});
$('nav.menu a[href="#"]').click(function (e) {
e.preventDefault();
});
Try this:
$('.menu a').click(function(e){
e.preventDefault(); // stop the normal href from reloading the page.
});
Working codepen example: http://codepen.io/anon/pen/cynEg
You did not have a reference to the jquery library included. Also the 'enquire' function is now throwing an error but preventDefault is working.
Edit I have commented out the second function.
And an inline option without jQuery:
Link
And don't forget that with this you have already used the "f" name for a function, so don't name other function like this.
Is it posible to add new element with javascript by using href and disable href at the same time?
So href only clicked once, and after that the new element will appear.
I wrote this code, but still no luck
JS
$(document).ready(function() {
$("#add_app").click(function() {
$("#box").append("<p>jQuery is Amazing...</p>");
this.removeAttribute('href');this.className='disabled';
}});
HTML
<a href="#" id="add_app" ><strong>Summon new element and disable me</strong></a>
The only does the job is in JS line
$("#box").append("<p>jQuery is Amazing...</p>");
Need help..
Thanks
--------------------------------------UPDATE---------------------------------
-Using improved code by PacMan, Linus Aronsson, and guest271314 and it works like a charm.
So basically we use .one() event handler to solve the problem.
Thanks for the feedback guys
Use this jQuery:
$(document).ready(function() {
$("#add_app").one("click", function() {
$("#box").append("<p>jQuery is Amazing...</p>");
this.removeAttribute('href');
});
});
I'm using the .one() event handler to indicate that you only want the click event to take place once. The rest of the code was more or less correct with a few small changes.
Here's a fiddle: https://jsfiddle.net/0mobshpr/1/
You can use .one(); note js at Question is missing closing parenthesis ) at click()
$(document).ready(function() {
$("#add_app").one("click", function() {
$("#box").append("<p>jQuery is Amazing...</p>");
this.removeAttribute('href');this.className='disabled';
})
});
you can try this
HTML
<a style="cursor: pointer;" id="add_app" ><strong>Summon new element and disable me</strong></a>
<div id="box"></div>
and in your JS code you can write this i have tested it and it worked fine
$(function(){
$("#add_app").one("click",function(){
$("#box").append("<p>jQuery is Amazing...</p>");
});
});
you need to return false whwn the link is click.
try this one JQuery code..
$("#add_app").click(function() {
$("#box").append("<p>jQuery is Amazing...</p>");
return false;
});
I would like to mimic a click event, so Im using Jquery like this:
$('document').ready(function() {
$('#searchResults a:eq(0)').trigger('click');
});
It doesn't work, meaning nothing happens, Example at JsFiddle
I know I can insert some javascript directly in the link like this onclick="myFunction()" But I would rather not do it like that. I also tried on mouseenter and other stuff but I can't seem to make it click.
This will work
$('document').ready(function() {
$('#searchResults a:eq(0)')[0].click()
});
To just navigate to the page do this:
$('document').ready(function() {
window.location.href = $('#searchResults a:eq(0)').attr('href');
});
http://jsfiddle.net/PVy8r/15/
anchor tags does not have click events, this will work for you:
window.location.href = $('#searchResults a:eq(0)').attr("href");
There is no click function attached to your link that is the reason why its not working
check jsfiddle demo : http://jsfiddle.net/PVy8r/17/
$('document').ready(function() {
window.location.href = $('#searchResults a:eq(1)').attr("href");
return false;
});
I am creating a responsive menu: Codepen Demo
To avoid the page to be reloaded when I click a link I have:
$('nav.menu a[href="#"]').click(function () {
$(this).preventDefault();
});
But this does not seem to work. When I click a button the menu disappears.
Does anyone knows what I am be doing wrong?
It's not the element that need a .preventDefault(), its the click event.
Try this:
$('nav.menu a').click(function (event) {
event.preventDefault();
// or use return false;
});
I don't recommend to use the href as selector though, better to give it an id or name.
From MDN, about .preventDefault():
Cancels the event if it is cancelable, without stopping further propagation of the event.
You can read more here:
MDN: event.preventDefault()
jQuery: Selectors
There is a CSS way, using pointer-events.
So by using in the CSS pointer-events: none; all click will be ignored. This is a "recent" alternative and suported in IE11+, Firefox 3.6+, Chrome 2.0+, Safari 4+.
Example
Here is very easy way to do it inside html.
<a class="font-weight-bold" href="javascript:void(0);"> Click Here </a>
Just return false.
$('nav.menu a[href="#"]').click(function () {
return false
});
Use like that:
$('nav.menu a[href="#"]').click(function (event) {
event.preventDefault();
});
$('nav.menu a[href="#"]').click(function (e) {
e.preventDefault();
});
Try this:
$('.menu a').click(function(e){
e.preventDefault(); // stop the normal href from reloading the page.
});
Working codepen example: http://codepen.io/anon/pen/cynEg
You did not have a reference to the jquery library included. Also the 'enquire' function is now throwing an error but preventDefault is working.
Edit I have commented out the second function.
And an inline option without jQuery:
Link
And don't forget that with this you have already used the "f" name for a function, so don't name other function like this.
i am having a problem when i click on an input(button) (click event captured using jquery) it is executed two times but the click event is single... i used "e.stopPropagation();" - but it didn't work...
jQuery("#ok").click(function(e){
alert("Alert");
e.stopPropagation();
});
i need the reason and the solution...
take care..
problem is solved...
i just added e.stopImmediatePropagation(); to the click function... and it worked... None of the following functions worked...
e.preventDefault();
e.stopPropagation();
return false
---------------------CODE---------------------
jQuery("#ok").click(function(e){
alert("Alert");
e.stopImmediatePropagation();
});
Click here for more information on jQuery Events..
Please use e.stop(true,true) and function which you are using. like
e.stop(true,true).show();
I think you use this code as below:
jQuery("#ok").click(function(){
alert("Alert");
return false;
});
e.preventDefault() is likely what you are looking for.
i used
return false;
after the desired action.