e.preventDefault()在模态加载时被跳过

e.preventDefault() being skipped for modal load

本文关键字：加载 模态 preventDefault      更新时间：2023-09-26

我发现这段代码使用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引导模态加载现在的问题是，而不是e.preventDefault运行它似乎忽略了它，跳转到链接，任何人都可以看到我可能在这里做错了什么。寻找错误，似乎没有任何错误在慢跑，它没有进入点击功能从我发现，但会继续尝试修复，而我等待响应。

编辑:

jQuery正确加载以上这段代码，我使用jinja2和所有重要的js都包含在我的基本模板，然后包含在我的孩子使用{{ super() }}，然后所有其他的脚本是在这个下运行，有一个其他的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的路由，我知道这个路由工作正确，因为它加载了模态的内容，但没有样式，因为它应该被添加到主页，不需要它。

编辑:

从阅读引导文档，这是我所提出的不再加载到页面，但模态不工作，我认为我有它的权利，但不确定。

<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>

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

而不是使用数据属性api来初始化你的模态捕获点击，就像你已经做的那样，并初始化模态。初始化代码看起来像这样:

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

另外，如果你想延迟显示模式，直到稍后的某个点(init之后)，你可以这样做:

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

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

http://getbootstrap.com/javascript/情态动词

相关文章：