我的 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 标签时,切换功能不起作用。我已经做了一些测试,例如从检查元素中删除隐藏的类,并且有数据要显示。我不知道发生了什么。请帮忙!
最佳答案
您需要使用 event delegation 为动态加载的元素附加事件:
j$(document).on('click','a.dropDown',function(e){
e.preventDefault();
j$(this).closest('.row').next().toggleClass('hidden');
});
关于jQuery 功能在 AJAX 调用后不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23123086/