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.

Javascript click event stop anchor href link

When include js click event the anchor tag href doest work
The HTML:
<li id="serviciosbtn">SERVICIOS</li>
The JS
var servicios = document.getElementById("serviciosbtn");
servicios.addEventListener("click", function(e) {
nav.classList.add("hide-mobile");
e.preventDefault();
});
That actually apply the class but the a href is now not working

e.preventDefault(); is the only reason
Read the official documenation
Try removing the e.preventDefault();
it will behave normally

#ullfindsmit, yes, when i delete e.preventDefault() it works

.preventDefault() method not working with .on()

I'm trying to prevent the default behavior of clicking on an anchor element like this:
<a class="btn btn-default start-match" data-call="start" href="/matches/256/start.json" data-method="patch" data-model="Match" rel="nofollow">
<span class="glyphicon glyphicon-screenshot"></span> Iniziata
</a>
with a javascript like this:
$(document).on(
'click',
"a",
function(event) {
event.preventDefault();
event.stopPropagation();
}
);
but this code is not preventing the default behavior, and the link is followed. why?
my jquery version is 1.10 and I'm using turbolinks

As per i know in anchor tag first preference given to HREF then onclick event. so by default HREF url get call first.
If you dont want to call anchor url then you can replace HREF tag with
....

It seems like event.preventDefault() works only from jQuery 1.7
The same JavaScript code with different results:
$(document).ready(function () {
$("a").on('click',
function (event) {
event.preventDefault();
//event.stopPropagation();
});
});
This fiddle with jQuery 1.6.4 and this with jQuery 1.7.2

I think what this is trying to do is call 'preventDefault' on document, when in reality, you want the 'a' event to be prevented. This is more likely to work:
$('a').on('click', function(e){
e.preventDefault();
e..stopPropagation();
// rest of your stuff
});
if this works as expected, 'stopPropagation' might not even be necessary

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();
});
});

Change attribute of twitter link

I'm trying to change the data-url with jQuery. Currently my code looks like this.
<div id="twitterButton" title="Tweet it on Twitter">Tweet</div>
<script type="text/javascript">
$(document).ready(function () {
$('#twitterButton').click(function () {
$('#tweet').attr("data-url", "https://www.google.com/");
});
});</script>
As you can see I left the url-data blank so I could be sure it is only getting set in the jQuery. However whenever I click the tweet button it always opens the window with the link for the current page that I was on. Can someone explain how I can set it to be something else via jQuery or javascript?

You should use .data() for controlling data attributes. As Daniele states in that answer, you must also stop the event propogation on the a element using preventDefault().
$('#twitterButton').click(function (e) {
$('#tweet').data('url',"https://www.google.com");
e.preventDefault();
});

You must call the preventDefault() method to stop the propagation of the click event on the child a element:
Try this code:
$('#twitterButton').click(function (e) {
$('#tweet').attr("data-url", "https://www.google.com/");
e.preventDefault();
});
Good code
D.