E.PreventDefault（）正在跳过模态负载

Question

我已经找到了使用ajax加载模态的代码，这只是我从我的数据模式加载动态模块的方法。我有一个标签设置来加载模态继承人一个示例

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

.

链接进入模态代码，只有模态代码最后一节是它添加的产品ID，因此它为API创建了唯一请求，然后将提供此页面。我一直在使用此链接的代码 jquery ajax bootstrap模态loading 现在我所拥有的问题而不是运行它似乎忽略它并跳转到链接的人可以看到这里可能在这里做错了。寻找错误，似乎在慢跑中没有任何错误，它不会从我发现的东西中进入单击函数，而是在我等待响应时继续尝试修复。

编辑：

jquery在此代码上方正确加载我使用的jinja2，并且所有重要的js都包含在我的基本模板中，然后在我的孩子中包含在我的孩子中使用e.preventDefault然后运行所有其他脚本在此下运行，以前还有一个其他的javascript在此之前运行这完美地适用于DataTable，我将在下面包含我的整个JS部分。 console.log部分只是我的调试，看看它是否到达代码。

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

.

编辑： 模态链接只是一个webapp2路线，我知道路线正常工作，因为它加载了模态的内容，但没有样式，因为它应该被添加到主页页面并且不需要它。

编辑： 从阅读Bootstrap Docs这就是我已经提出的，它不再加载到页面，但模态不起作用，我认为我有正确但不确定。

<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

数据 - toggle=“模态”属性是bootstraps api的一部分。在这里玩其他一些事情，将事件侦听器附加到这样的元素以及您所看到的实际上发生了两种事件。您在单击处理程序中捕获的那个，并通过Bootstraps API注册的那个。

而不是使用Data属性API来验证您的模态捕获，就像已经在那里做过并且init in init in in in in init。init代码看起来与此类似：

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

.

此外，如果要延迟模态的显示，直到一些稍后的点（init之后）您可以执行类似的内容：

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

.

签出引导文件以获取更多信息，我发现它是漂亮的现货。

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