1

Me gustaría eliminar la redirección en el tag a ya que actualmente al hacer click se me abre un modal, pero no quiero que se me redireccione la página del navegador, he probado con preventdefault y no me funciona. Estoy trabajando con C# MVC. ¿Puede ser que se me sobrecargue en alguna otra parte? o ¿existen otras soluciones para que no me redireccione? Como última opción no me gustaría cambiarlo por un span o div o 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');
            });
        });
});
2
  • igual con esto le ayuda <a href="javascript:void(0);"> Saludos Commented el 25 feb. 2016 a las 13:26
  • 2
    Hola, no entiendo bien lo que explicas... a que te refieres con que se redirecciona? se carga otra pagina? .... lo pregunto porque el <a> no tiene el atributo href así que no puede ir a ninguna parte. ¿Falta algo en este codigo? y puedes explicar mejor que sucede cuando lo clicas? Commented el 25 feb. 2016 a las 16:50

3 respuestas 3

4

Si no agregas la propiedad href a tu enlace no tiene objeto el uso de 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>

0

En principio parece que lo estás haciendo bien aunque yo preferiría hacerlo así:

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

El cambio mas importante de mi código es hacer la selección del elemento fuera el método on

Otras dos cosas que podrías intentar son:

  • Añadir un href="#" a tu enlace
  • Sustituir e.preventDefault(); por event.stopPropagation(); (de esto último no estoy muy seguro)
0
0

Hay forma de abrir un modal a través de un id y un modal con ese id de referencia. En cambio lo que haces es activar funcionalidad tras el evento, pero el navegador continua con la redirección debido a que no estás deteniendo la propagación del mismo, puedes consultar una respuesta donde hablo de la propagación de los eventos: https://es.stackoverflow.com/a/1781/729.

Para detener el comportamiento natural de un evento debes tomar en cuenta 2 cosas:

event.preventDefault(): Si este método es llamado, la acción default del evento no será activada / lanzada.

event.stopPropagation(): Previene la continuidad del evento (bubbling) por medio de árbol del DOM, previniendo que cualquier otro elemento padre sea notificado.

Te recomiendo leer el siguiente documento que habla sobre el bubbling: Eventos bubbling y JQuery - Arquitectura Java.

Tomando lo ya anterior mencionado, podrías probar con detener en tu clic la propagación del evento.

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.