javascript - 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 modal loading上的代码现在我遇到的问题是，它似乎忽略了它并跳转到链接，而不是运行 e.preventDefault ，任何人都可以看到我在这里可能做错了什么。查找错误，慢跑中似乎没有任何错误，并且它没有进入我发现的点击功能，但在我等待响应时会继续尝试修复。

编辑:

jQuery 在这段代码之上正确加载，我正在使用 jinja2，所有重要的 js 都包含在我的基本模板中，然后使用 {{ super() }} 包含在我的 child 中，然后所有其他脚本都是在这个下运行，在此之前运行的另一段 JavaScript 运行完美，仅适用于数据表，我将在下面包含我的整个 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 文档，这就是我想出的，它不再加载到页面，但模式也不起作用，我认为我是对的，但不确定。

<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

data-toggle="modal"属性是 bootstraps API 的一部分。这里还有一些其他事情在起作用，将事件监听器附加到这些元素，您看到的实际上是两个事件正在发生。您在点击处理程序中捕获的一个和由 bootstraps API 注册的一个。

不要像您已经做的那样使用数据属性 api 来初始化模态捕获点击并在那里初始化模态。初始化代码将类似于以下内容:

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

此外，如果您想延迟模式的显示，直到稍后(初始化之后)，您可以执行以下操作:

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

查看 Bootstraps 文档以获取更多信息，我发现它非常准确。

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