e.preventDefault() se omite para la carga modal

Question

Encontré este código que usa ajax para cargar un modal, es justo lo que necesito para cargar modales dinámicos desde mis tablas de datos.Tengo una configuración de etiqueta para cargar un modal. Aquí hay un ejemplo.

<a class="blue" href="/api/getmodal/products/' + str(self.result.ids) + '" data-toggle="modal"> 
    <i class="icon-zoom-in bigger-130"></i> 
</a> 

El enlace va al código modal y solo al código modal, la última sección es la identificación del producto que agrega, por lo que crea una solicitud única a la API que luego servirá esta página.He estado jugando con el código en este enlace. Carga modal de arranque jQuery ajax ahora el problema que tengo es que en lugar de e.preventDefault ejecutarlo parece ignorarlo y saltar al enlace. ¿Alguien puede ver qué podría estar haciendo mal aquí?Busqué errores y no parece haber ningún error en el avance y no ingresa a la función de clic según lo que encontré, pero seguiré intentando solucionarlo mientras espero respuestas.

EDITAR:

jQuery está cargado correctamente encima de este código. Estoy usando jinja2 y todos los js importantes están incluidos en mi plantilla base y luego se incluyen en mi hijo usando {{ super() }} luego, todos los demás scripts se ejecutan bajo este. Hay otro bit de JavaScript que se ejecuta antes de este y que funciona perfectamente y que es solo para la tabla de datos. Incluiré toda mi sección js a continuación.Las secciones console.log son solo para mi depuración para ver si llega al código.

jQuery(function($) {
        var oTable1 = $('#sample-table-2').dataTable( {
        "sAjaxSource": '/api/products/datatables',
        "aoColumns": [
          null, null,null, null, null,
          { "bSortable": false }
        ] } );


        $('table th input:checkbox').on('click' , function(){
            var that = this;
            $(this).closest('table').find('tr > td:first-child input:checkbox')
            .each(function(){
                this.checked = that.checked;
                $(this).closest('tr').toggleClass('selected');
            });     
        });
    })

    $(document).ready(function() {
        // Support for AJAX loaded modal window.
        $('[data-toggle="modal"]').click(function(e) {
            sleep(10000)
            e.preventDefault();
            console.log('point two');
            var url = $(this).attr('href');
            if (url.indexOf('#') == 0) {
                $(url).modal('open');
                console.log('point two');
                sleep(1000);
            } else {
                $.get(url, function(data) {
                    $('<div class="modal hide fade">' + data + '</div>').modal();
                    console.log('point three');
                });
            }
        });
    });

EDITAR:El enlace al modal es solo una ruta webapp2. Sé que la ruta funciona correctamente ya que carga el contenido del modal pero sin estilo, ya que se supone que debe agregarse a la página principal y no lo necesita.

EDITAR:Al leer los documentos de arranque, esto es lo que se me ocurrió: ya no se carga en la página, pero el modal tampoco funciona. Creo que lo tengo bien, pero no estoy seguro.

<a class="blue" data-toggle="modal" href="/api/getmodal/products/' + str(self.result.ids) + '" data-target="#modalProduct" > 
    <i class="icon-zoom-in bigger-130"></i> 
</a> 

Answer 1

El atributo "modal" de Data-toggle="modal" es parte de BootStraps API.Hay algunas otras cosas en juego aquí que adjuntan a los oyentes de eventos a tales elementos y lo que está viendo es que en realidad sucede dos eventos.El que captura en su handler de clic y el registrado por Bootstraps API.

En lugar de usar la API del atributo de datos para iniciar su captura modal, haga clic en que ya realiza e inicie el modal allí.El código de inicio se verá similar a esto:

$('#myModal').modal({
remote:url
});

Además, si desea retrasar la visualización del modal hasta que un punto posterior (después de INIT) pueda hacer algo así:

$('#myModal').modal({
remote:url,
show:false
});

Revise la documentación de BootStraps para obtener más información. He encontrado que es bastante lugar.

http://getbootstrap.com/javascript/#modals