AJAX调用后jQuery功能无法正常工作

发布时间：2020-12-15 22:54:05 所属栏目：百科来源：网络整理

导读：我似乎遇到了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 ); }); },80

我似乎遇到了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标记,则隐藏类的行将切换.我有另外两行的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>

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

解决方法

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!