Develop Reference

Why does my function switching visibility if else statement not work? [duplicate]

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.

Triggered click don't work propertly [duplicate]

I'm having a hard time understand how to simulate a mouse click using JQuery. Can someone please inform me as to what i'm doing wrong.
HTML:
<a id="bar" href="http://stackoverflow.com" target="_blank">Don't click me!</a>
<span id="foo">Click me!</span>
jQuery:
jQuery('#foo').on('click', function(){
jQuery('#bar').trigger('click');
});
Demo: FIDDLE
when I click on button #foo I want to simulate a click on #bar however when I attempt this, nothing happens. I also tried jQuery(document).ready(function(){...}) but without success.

You need to use jQuery('#bar')[0].click(); to simulate a mouse click on the actual DOM element (not the jQuery object), instead of using the .trigger() jQuery method.
Note: DOM Level 2 .click() doesn't work on some elements in Safari. You will need to use a workaround.
http://api.jquery.com/click/

You just need to put a small timeout event before doing .click()
like this :
setTimeout(function(){ $('#btn').click()}, 100);

This is JQuery behavior. I'm not sure why it works this way, it only triggers the onClick function on the link.
Try:
jQuery(document).ready(function() {
jQuery('#foo').on('click', function() {
jQuery('#bar')[0].click();
});
});

See my demo: http://jsfiddle.net/8AVau/1/
jQuery(document).ready(function(){
jQuery('#foo').on('click', function(){
jQuery('#bar').simulateClick('click');
});
});
jQuery.fn.simulateClick = function() {
return this.each(function() {
if('createEvent' in document) {
var doc = this.ownerDocument,
evt = doc.createEvent('MouseEvents');
evt.initMouseEvent('click', true, true, doc.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
this.dispatchEvent(evt);
} else {
this.click(); // IE Boss!
}
});
}

May be useful:
The code that calls the Trigger should go after the event is called.
For example, I have some code that I want to be executed when #expense_tickets value is changed, and also, when page is reload
$(function() {
$("#expense_tickets").change(function() {
// code that I want to be executed when #expense_tickets value is changed, and also, when page is reload
});
// now we trigger the change event
$("#expense_tickets").trigger("change");
})

jQuery's .trigger('click'); will only cause an event to trigger on this event, it will not trigger the default browser action as well.
You can simulate the same functionality with the following JavaScript:
jQuery('#foo').on('click', function(){
var bar = jQuery('#bar');
var href = bar.attr('href');
if(bar.attr("target") === "_blank")
{
window.open(href);
}else{
window.location = href;
}
});

Try this that works for me:
$('#bar').mousedown();

Technically not an answer to this, but a good use of the accepted answer (https://stackoverflow.com/a/20928975/82028) to create next and prev buttons for the tabs on jQuery ACF fields:
$('.next').click(function () {
$('#primary li.active').next().find('.acf-tab-button')[0].click();
});
$('.prev').click(function () {
$('#primary li.active').prev().find('.acf-tab-button')[0].click();
});

I have tried top two answers, it doesn't worked for me until I removed "display:none" from my file input elements.
Then I reverted back to .trigger() it also worked at safari for windows.
So conclusion, Don't use display:none; to hide your file input , you may use opacity:0 instead.

Just use this:
$(function() {
$('#watchButton').trigger('click');
});

You can't simulate a click event with javascript.
jQuery .trigger() function only fires an event named "click" on the element, which you can capture with .on() jQuery method.

How do I use JQuery to hide a div on click again?

CODE:
<script type="text/javascript">
$(document).ready(function() {
$("#clicker").click(function() {
$(".show_this").show();
e.preventDefault();
});
});
</script>
Using the script above I am able to show .show_this on clicking #clicker but on clicking #clicker again i want to hide it. How can I tweak my code to do that?
I did some research and it seemed that by using e.preventDefault(); I would be able to achieve that but it didn't work.

You can use toggle();
$(".show_this").toggle();
This will toggle every time, so if it is hidden it will show it and vice versa
Api Documentation: http://api.jquery.com/toggle
Also event.preventDefault(); will not be able to do this, though it is useful if the .show-this is a anchor tag because it will prevent the default action and that is to follow the link.

Use .toggle() instead.
$(document).ready(function() {
$("#clicker").click(function(e) {
$(".show_this").toggle();
e.preventDefault();
});
});
jsFiddle example

You can do this using the .toggle() method like:
$(document).ready(function() {
$("#clicker").click(function(e) { // call the event variable 'e' first here
e.preventDefault();
$(".show_this").toggle();
});
});

Prevent a link to reload page

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.

jQuery preventDefault function not working on jsfiddle

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).