We Keep Coding

preventDefault not working as expected

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.

Bootstrap v3 modal close event not firing

I have tried all of the following code, and I cannot get the "hidden" modal event to fire. I have read the documentation, and every other SO question I can find, but still to no avail. I am using rails. Here is the code I have tried:
$('#signupmodal').on('hide.bs.modal', function() {
alert("hide");
});
$('#signupmodal').on('hidden.bs.modal', function () {
alert('hidden event fired!');
});
$('#signupmodal').on('show.bs.modal', function (e) {
setTimeout(function(){
alert("show");
}, 300);
});
$(document.body).on('hidden.bs.modal', function () {
$('#signupmodal').removeData('bs.modal')
});
$(document).on('hidden.bs.modal', '#signupmodal', function (event) {
alert("hide");
});
Any insight is greatly appreciated!

I almost don't want to admit this, delete my question and never speak of it again, but turns out jQuery was being loaded twice, and therefore I couldn't access Bootstrap JS.
Thank you for the help anyway! :)

Callback event when jQuery 'mmenu' closed

Using the jQuery mmenu plugin, I need to call a JavaScript function either after the menu has finished closing or simultaneously.
In the documentation I can't see any suggestion for closing entire menu but only for closePanel.
I need to insert in mmenu closing function another one (custom) to hide lightbox effect on the page.
<script type="text/javascript">
$(document).ready(function() {
$("#menu").mmenu({
"extensions": [
"theme-white"
],
"offCanvas": {
"zposition": "front"
},
"slidingSubmenus": false
});
$("#menu").show();
});
</script>
<script type="text/javascript">
function lightbox(){
(function($) {
// some stuff
})(jQuery);}
</script>
is there a way to bind another function after the plugin has been closed or better, when entire menu closing action?

I had the same exact question today and after some tinkering, this works for me. Bind to the opened/closed events like so:
$('#mmenu_id').data('mmenu').bind('opened', function () {
console.log('opened');
});
$('#mmenu_id').data('mmenu').bind('closed', function () {
console.log('closed');
});

you could try binding to the closing event
$('#mmenu').on('closing.mm', function() {
// do something
});
There is also a closed event too, so you can use which ever is appropriate
$('#mmenu').on('closed.mm', function() {
// do something
});

jquery click and preventDefault error

I'm trying to prevent a Jquery onclick function to scroll the page to the top.
I found out that preventDefault() would fix this problem but I can't get it to work.
Here's the website with the code:
http://www.femartins.com.br/novo/galeria.html
Here's the code that I'm using:
$( document ).ready(function() {
$('.carouselObj').click(function(evt){
var index = $('.carouselObj').index(this);
$('.galcontent').eq(index).siblings('.galcontent').fadeOut(500,function() {
$('.galcontent').eq(index).fadeIn(500);
evt.preventDefault();
});
});
});
Any help is welcome! :)

You need to use evt.preventDefault(); in the event handler. Not in the complete callback function of fadeOut
$('.carouselObj').click(function (evt) {
//Use here
evt.preventDefault();
var index = $('.carouselObj').index(this);
$('.galcontent').eq(index).siblings('.galcontent').fadeOut(500, function () {
$('.galcontent').eq(index).fadeIn(500);
});
});

Figure the problem wasn't on click but the way the html was built.
I added a div with the same height as the content and the problem was solved!
Thanks

Trigger a jQuery Event Handler Assigned in a Different Code Block

I have a case where a click handler is defined/assigned in one jQuery code block (file) and I want to trigger it from another click event defined/assigned in a different jQuery code block. How can I accomplish this?
The following code is a greatly simplified version of what I am trying to accomplish. The behavior I want to see is a JavaScript alert "Element One" when I click #Element2.
Example HTML:
<p id="Element1">Element One</p>
<p id="Element2">Element Two</p>
First jQuery code block:
$(document).ready(function() {
$('#Element1').click(function() {
alert('Element One');
});
});
Second jQuery code block:
$(document).ready(function() {
$('#Element2').click(function() {
$('#Element1').click();
});
});
UPDATE: My original example actually works. I was building upon my field hint jQuery UI Dialog solution, and didn't account for about the 'clickoutside' handler that I was using. Adding a check to for the second element in my 'clickoutside' handler allows the dialog to display.

You need to trigger a click when you click on the first element. You can use the trigger method for this.
function element1Hanlder () {
alert('Element One');
}
$(document).ready(function() {
$('#Element1').click(function() {
alert('Element One');
});
});
$(document).ready(function() {
$('#Element2').click(function() {
$('#Element1').trigger('click');
});
});

EDIT: This is based on JohnP's "trigger" suggestion (so you should choose him as the right answer)...
If I load this block from an external js file...
$(document).ready(function() {
$('#Element1').click(function () {
alert( $(this).text() );
});
});
Then load this in a script tag within the HTML itself...
$(document).ready(function() {
$('#Element2').click(function () {
$('#Element1').trigger('click');
});
});
Seems to be working as intended.