Question

 <script
          src="https://code.jquery.com/jquery-3.2.1.min.js"
          integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
          crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

这是我的html头部内容。

我的模板包含动态呈现的帖子元素（缩略图），其中包含一个模态。

 <li><div class="thumbnail" id="{{post.0.pk}}">
 <a href="#exampleModalLong{{post.0.pk}}" class="popup"  data-toggle="modal">(Input form)</a>
 <!-- Modal -->
 <div class="modal fade" id="exampleModalLong{{post.0.pk}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
 <div class="modal-dialog" role="document">

........

呈现这些帖子的javascript是：

 if ($(window).scrollTop() == ($(document).height() - $(window).height()))
 {
 ready=false;
 $.ajax(
 {
 url:'/home/scroll/loadcontent/',
 method:'get',
 data:{posts:str},
 dataType:'json',
 success:function(response)
 {

 $("#col1").children('#tiles').append(response.col1);
 $("#col1").children('#tiles').append(response.col4);
 $("#col2").children('#tiles').append(response.col2);
 $("#col2").children('#tiles').append(response.col5);
 $("#col3").children('#tiles').append(response.col3);
 $("#col3").children('#tiles').append(response.col6);
 }
 }).always(function(){
            ready = true; //Reset the flag here
        });
 }
 }
 window.onscroll=yHandler;

在这种安排中，所有在col1中呈现的元素（$（“＃col1”）。children（'＃tiles'）。append（response.col1）;）都有模态工作，而其他任何模式都是不...

Answer 1

我认为这就是你所需要的。从模板中删除淡出类

medium-6

编辑：

在模板中，您缺少2个最后2个div的结束标记。
在头脑中你已经包含了两次jQuery。
我仍然担心 $（“＃col1”）， $（“＃col2”）和 $（“＃col3”）< / em>让孩子具有相同的身份 #tiles

我注意到了一些事情......还有......当 {{post.0.pk}} 这样的东西被编译好了吗？

bootstrap模式只处理某些元素而不处理其他元素。元素是动态呈现的

1 个答案: