preventDefault not working as expected - javascript

I would like to remove the tag redirection hyperlink. Currently clicking it opens a modal but I do not want to redirect the browser. I tried preventDefault and it does not work for me.
I'm working with C# MVC. It might be that I overload elsewhere? Or are there other solutions to avoid redirecting? As a last resort I would not like to change the element to a span, div or button.
algo.cshtml:
<a id="modalAboutButton">Ir a about </a>
<div id="aboutModal" class="reveal-modal" data-reveal></div>
app.js
$(document).ready(function () {
$(document).on('click', '#modalAboutButton', function (e) {
e.preventDefault();
var $modal = $('#aboutModal');
$.get('/About/Index2', function (resp) {
$modal.html(resp).foundation('reveal', 'open');
});
});
});

Simple example
Google
Js
$('a').click( function(e) {
e.preventDefault();
alert("preventDefault");
});
Fiddle example
I hope it will help you.

Related

jQuery animation() not working

Sorry but I just can't for the world understand why it isn't working. Been testing different things the whole day. I suspected my different jQuery sources but testing in jSFiddle gives me the same result. This should be an easy fix. I just want an animation when clicking on one of the circles to bring up a submenu from the right side of the screen.
The Fiddle http://jsfiddle.net/YWTt2/14/
The html part is mainly SVG stuff so there's noting to see, below is the JavaScript part and it's all in the jsfiddle.
//Function for opening submenus and animation
$(document).on("click", "a[name='menu1']", function (e) {
e.preventDefault();
$("#menu1").css({visibility:"visible"});
$("#menu1").animate({left:'550px'});
//$("#menu1").slideDown(5110);
});
$(document).on("click", "a[name='menu2']", function (e) {
e.preventDefault();
$("#menu2").css({visibility:"visible"});
});
$(document).on("click", "a[name='menu3']", function (e) {
e.preventDefault();
$("#menu3").css({visibility:"visible"});
});
$(document).on("click", "a[name='menu4']", function (e) {
e.preventDefault();
$("#menu4").css({visibility:"visible"});
});
$(document).on("click", "a[name='menu5']", function (e) {
e.preventDefault();
$("#menu5").css({visibility:"visible"});
});
//Closes the open submenus
$("#controlnav").on("click", function (e) {
$("#menu1,#menu2,#menu3,#menu4,#menu5").css({visibility:"hidden"});
});
Your code is fine, You just need to update the jQuery file to the latest one (jQuery 2.x).
check this fiddle : http://jsfiddle.net/pragneshok/YWTt2/15/
The problem is the tag. Is not supported.
Check out this answer: jQuery animate <object> tag

jQuery issue with fancybox

I am using jquery click event to open fancybox and it is working perfect. I have added one textbox inside this inline1 div but when I input something I can't writer anything.
My Code:
$(document).ready(function() {
$(".fancybox").on("click", function() {
$("#inline1").fancybox().trigger('click');
})
});
jsFiddle: my code
Any Idea?
Thanks
There was a problem with the triggering of 'click', I managed to fix this by simply using the Fancybox API to open the Fancybox without requiring a trigger.
$(".fancybox").on("click", function () {
$.fancybox.open( '#inline1' )
});
http://jsfiddle.net/xW5gs/1171/
$(".fancybox").on("click", function() {
$.fancybox($('#inline1').html())
})
check here

JQuery click on link not working

Ive the following code:
<script type="text/javascript">
$(document).ready(function(){
shortcut.add("Ctrl+Alt+N", function() {
$("#btnSave").click();
});
});
</script>
where btnSave is anchor element with ID btnSave, shortcut is from http://www.openjs.com/scripts/events/keyboard_shortcuts/ . If i change the line $("#btnSave").click(); to document.getElementById("btnSave").click() - all works fine. The question is why jquery implementation is not working in my case?
PS: made jsfiddle for my case: http://jsfiddle.net/0x49D1/WCmeU/
Here is the guy with similar problem: http://forums.asp.net/t/1591818.aspx
Instead of $("#btnSave").click(); try with $("#btnSave").trigger('click');
You can also use $("#btnSave")[0].click(); which is jquery equivalent to document.getElementById("btnSave").click();
Update:
It's not possible to simulate a user link click from javascript, for security reasons, all you can do is attach your own handler for click event and redirect based on the href of the link, like so:
$("#btnSave").bind('click', function() {
window.location.href = $(this).attr('href');
});
try this
<script type="text/javascript">
$(document).ready(function(){
shortcut.add("Ctrl+Alt+N", function() {
$("#btnSave").live('click',function(){
// do stuff here
});
});
}); </script>

How to trigger a function if ANY link is clicked, by using jQuery?

I'm a jQuery newbie and I've spent hours trying to find the answer to this and the documentations didn't help me much.
I simply want to change the style of:
#footer_menu{bottom:0;}
to
#footer_menu{bottom:-48px;}
once ANY link on the page is clicked. No IDs whatsoever, I just want to be able to trigger that function whenever ANY link is clicked.
I'm starting to wonder this is not at all possible and it should be done by adding IDs to the A tags. is this true and what's the best way to achieve this?
Try like this, Demo on JsFiddle
$('a').click(function() {
$('#footer_menu').css('bottom', '-48px');
});
$('a').on('click', function(e) {
$('#footer_menu').css('bottom', '-48px');
e.preventDefault();
}
$('a').on('click', function(event) {
$('#footer_menu').css('bottom', '-48px');
event.preventDefault(); // only if links should not navigate afterwards
});
You just basically select all anchors with $('a').

Jquery - .click() that doesnt scroll the page

I'm about to make a function on jQuery like this:
$(document).ready(function() {
$('#header_rules').click(function() {
// here i define myFunction()
});
});
<a id="header_rules" href="#">RULES</a>
instead of
<a id="header_rules" href="#" onClick="myFunction();return false">RULES</a>
But I don't know how to prevent scrolling to the top of the page using jQuery after someone clicks the link.
In fact, I'll total get rid about native JS, which could yield some trouble (that's why I use a JS framework like jQuery).
Any help? Cheers
Call e.preventDefault(); where e is the first argument of your click handler:
$(document).ready(function() {
$('#header_rules').click(function(e) {
e.preventDefault();
// here i define myFunction()
});
});
<a id="header_rules" href="#">RULES</a>
The below will also work, but it'll stop other click events on the item, I think.
(document).ready(function() {
$('#header_rules').click(function() {
// here i define myFunction()
return false;
});
});
What ThiefMaster said, and you could also inclue return false; inside your function intead of inline.

Categories