javascript - ajax追加列表组项目不触发点击事件

Question

我有一个通过 Django 模板标签填充的 Accordion 。在每个 Accordion 项目旁边，我有一个列表组。列表组的项目通过 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 添加到页面的元素还不存在。您应该改为查看委托(delegate)事件。

根据您的 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()

<小时/>

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

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

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