e.preventDefault() sendo ignorado para carregamento modal

Question

Eu encontrei este código que usa ajax para carregar um modal, é exatamente o que preciso para carregar modais dinâmicos de minhas tabelas de dados.Eu tenho uma configuração de tag para carregar um modal aqui está um exemplo

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

O link vai para o código modal e apenas o código modal, a última seção é o ID do produto que ele adiciona, criando uma solicitação exclusiva para a API que servirá esta página.Eu tenho brincado com o código neste link carregamento modal jQuery ajax bootstrap agora o problema que tenho é que em vez do e.preventDefault executá-lo parece ignorá-lo e pular para o link, alguém pode ver o que posso estar fazendo de errado aqui.Procurei por erros e não parece haver nenhum erro no jog e ele não entra na função de clique pelo que encontrei, mas continuarei tentando consertar enquanto espero pelas respostas.

EDITAR:

jQuery está carregado corretamente acima deste código. Estou usando jinja2 e todos os js importantes estão incluídos em meu modelo base e depois incluídos em meu filho usando {{ super() }} então, todos os outros scripts são executados sob este, há outro bit de JavaScript executado antes disso que funciona perfeitamente, que é apenas para a tabela de dados. Incluirei toda a minha seção js abaixo.As seções console.log são apenas para minha depuração para ver se chega ao 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:O link para o modal é apenas uma rota webapp2. Sei que a rota funciona corretamente pois carrega o conteúdo do modal mas sem estilo, pois deveria ser adicionado à página principal e não precisa dele.

EDITAR:Ao ler os documentos do bootstrap, foi isso que descobri: ele não carrega mais na página, mas o modal também não funciona. Acho que acertei, mas não tenho certeza.

<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

o atributo data-toggle="modal" faz parte da API bootstraps.Há algumas outras coisas em jogo aqui que conectam ouvintes de eventos a esses elementos e o que você está vendo são, na verdade, dois eventos acontecendo.Aquele que você captura em seu manipulador de cliques e aquele registrado pela API bootstraps.

Em vez de usar a API de atributo de dados para iniciar seu modal, capture o clique como você já faz e inicie o modal lá.O código de inicialização será semelhante a este:

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

Além disso, se você quiser atrasar a exibição do modal até algum ponto posterior (após o init), você pode fazer algo assim:

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

Confira a documentação do Bootstraps para obter mais informações que achei bastante precisas.

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