jQuery 功能在 AJAX 调用后不起作用

Question

我的 jQuery 点击函数似乎有问题，我有以下代码:

j$(document).ready(function(e) {

setInterval(function(){

    j$.ajax({
      url: "/include/new_customer.php",
      cache: false
    })
      .done(function( html ) {
        j$( "section .col-xs-12" ).append( html );
      });


  },80000);

    j$('a.dropDown').click(function(e){
        e.preventDefault();
        j$(this).closest('.row').next().toggleClass('hidden');
    });
});

使用以下 HTML(抓取必要的内容):

<div class="col-xs-12>
    <div class="row">
        <a href="#" class="dropDown">Manage</a>
    </div>
    <div class="row hidden">
        <!-- stuff -->
    </div>    
</div>

您可以看到，如果您单击 a 标签，隐藏类的行将切换。我有附加 2 行的 AJAX，所以它会像这样:

<div class="col-xs-12>
        <div class="row">
            <a href="#" class="dropDown">Manage</a>
        </div>
        <div class="row hidden">
            <!-- stuff -->
        </div>  
        <div class="row">
            <a href="#" class="dropDown">Manage</a>
        </div>
        <div class="row hidden">
            <!-- stuff -->
        </div>    
    </div>

我的问题是，对于新数据，当我点击 a 标签时，切换功能不起作用。我已经做了一些测试，例如从检查元素中删除隐藏的类，并且有数据要显示。我不知道发生了什么。请帮忙!

Answer 1

您需要使用 event delegation 为动态加载的元素附加事件:

j$(document).on('click','a.dropDown',function(e){
    e.preventDefault();
    j$(this).closest('.row').next().toggleClass('hidden');
});