Question

我有一个通过Django Template标签填充的手风琴。在每个手风琴项目的一侧，我有一个列表组。列表组的项目通过ajax填充在DomReady上。这非常有效。但是，我需要list-group-items能够触发另一个ajax调用，这样我就可以查询数据库并在另一个div中呈现list-group-item的相关对象。如果我硬编码项目它工作正常，但创建的ajax不会触发事件。任何帮助是极大的赞赏。非常感谢你。

的Ajax / HTML：

<div class="panel-group" id="accordion">
    {%for fabCatagory in fab_categories%}
      <div class="panel panel-primary">
        <div class="panel-heading"> 
         <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" data-target="#  {{fabCatagory.categoryId}}" id="{{fabCatagory.categoryId}}btn"> 
                {{fabCatagory}}
            </a>
          </h4>
<script type="text/javascript">

         $(document).ready(function(){


                  $.ajax({
                          dataType: 'json',
                          type: 'GET',
                          url: '/companion/topic/{{fabCatagory}}/',

                          success: function(result){
                                      for(var i=0; i < result.topics.length; i++){
                                         $("#{{fabCatagory.categoryId}}topics").append(

                                              "<a id='"+result.topics[i].topicId+"' class='list-group-item' ><li>"+result.topics[i].topic+"</li></a>"

                                           );//end append


                                       }//end for 

                                     },//end success

                    });//end Ajax
                    });//end </script>



</div>
      <div id="{{fabCatagory.categoryId}}" class="panel-collapse collapse">
          <div class="panel-body">

               <div id="{{fabCatagory.categoryId}}topics" class="list-group">

                           <!--Ajax Data Goes Here-->

               </div>       
           </div>
      </div>
</div>

</div>

 <script type="text/javascript">    
        var topicLinkId = $(".list-group").attr('id');
        $("#"+topicLinkId).on('click', function(){ //This doesn't work
                        console.log('success');//this will be replaced, ajax function

        }) ;         

 </script>
                       {%endfor%}

        </div>

Answer 1

AJAX请求在文档加载后发生并且是异步的。您无法保证何时会发生AJAX响应。您可以立即附加活动，因此您使用AJAX添加到页面的元素还没有。您应该查看委派的事件。

根据您的jQuery版本，您可能希望执行以下操作：

// jQuery 1.7+
$(document).on('click', '.list-group', function(e){
    console.log('success');
}):

// older versions
$('.list-group').live('click', function(e){
    console.log('success');
});

您只需要创建一次此事件处理程序，因此您应该从{%for loop%}中删除它。

基本上，您可以在根文档对象上设置单击事件处理程序，并且只有在目标元素与某些CSS查询匹配时才触发它 - 在这种情况下，.list-group是目标。它将适用于设置事件处理程序后添加的任何元素，并且无需

您可以在此处阅读更多文档：jQuery .on()

或者，您可以在将成功函数中的元素分别添加到每个元素后绑定事件。

success: function(result){
    for(var i = 0; i < result.topics.length; i++){
        $("#{{fabCatagory.categoryId}}topics").append(
            $("<a id='"+result.topics[i].topicId+"' class='list-group-item' ><li>"+result.topics[i].topic+"</li></a>").
            bind('click', function(e){
                console.log('success');
            });
        ).
    }
},

但是，使用这种方法，每个链接都会定义它自己独立的事件处理函数。

Answer 2

关于ajax请求是否成功。您必须为新添加的项绑定click事件，以便DOM更新...您必须在成功处理程序中添加重新绑定。

ajax append list-group-items不会触发单击事件

2 个答案: