preventDefault href does not work

Question

preventDefault href does not work

Navigation

#1 by (4 votes)
#2 by (0 votes)
#3 by (0 votes)

1

I would like to eliminate the redirection in the a tag since currently when I click, a modal opens, but I do not want to be redirected to the browser page, I have tried with preventdefault and it does not work for me. I'm working with C # MVC. Could it be that I'm overloaded somewhere else? Or are there other solutions to prevent me from redirecting? As a last option I would not like to change it to span or 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');
            });
        });
});

javascript jquery html5 asp.net

asked by gvivetapl 25.02.2016 в 13:29

source

3 answers

Is there any way to see which objects use an index in Genexus? Problem with the while loop in JAva

score 4 · Answer 1

If you do not add the href property to your link, there is no use for preventDefault

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#!" id="modalAboutButton">Ir a about </a>

<div id="aboutModal" class="reveal-modal" data-reveal></div>

score 0 · Answer 2

In principle it seems that you are doing it well although I would prefer to do it like this:

$(function () {
    $('#modalAboutButton').on('click', function (e) {
        e.preventDefault();
        var $modal = $('#aboutModal');
        $.get('/About/Index2', function (resp) {
            $modal.html(resp).foundation('reveal', 'open');
        });
    });
});

The most important change in my code is to make the selection of the element outside the method on

Two other things you could try are:

Add a href="#" to your link
Replace e.preventDefault(); with event.stopPropagation(); (from this last one I'm not sure)

score 0 · Answer 3

There is a way to open a modal through an id and a modal with that reference id. Instead what you do is activate functionality after the event, but the browser continues with the redirection because you are not stopping the propagation of it, you can consult an answer where I talk about the propagation of events: link .

To stop the natural behavior of an event you must take into account 2 things:

event.preventDefault (): If this method is called, the default action of the event will not be activated / thrown.

event.stopPropagation (): Prevents event continuity (bubbling) through DOM tree, preventing any other parent element from being notified.

I recommend reading the following document that talks about bubbling: Bubbling events and JQuery - Java architecture .

Taking the above mentioned, you could try to stop the propagation of the event on your click.

$(document).ready(function () {
    $(document).on('click', '#modalAboutButton', function (e) {
        e.preventDefault();
        e.stopPropagation();
        var $modal = $('#aboutModal');
        $.get('/About/Index2', function (resp) {
            $modal.html(resp).foundation('reveal', 'open');
        });
    });
});