代码如下......当点击发生时,.slideToggle只是循环而div无休止地上下滑动......
$(document).ready(function() {
$.getJSON('/test/getsubtopics2.php', function(data) {
$.each(data.topics, function(name,value) {
$(".forum-topics").append('<div class="forum-topic-head"><div class="forum-topic-row"><div class="expand">+</div><div class="forum-title">' + value.topic_name + '</div></div><div class="subtopic-frame" id="' + value.topic_id + '"></div>');
$.each(value.subtopic_array, function(name2,value2) {
$("#" + value.topic_id).append('<div class="subtopic-name"><a href="/forums/topic.php?id=' + value2.subtopic_id + '">' + value2.subtopic_name + '</a></div><div class="num-threads"></div>');
$(".forum-topic-row").click(function(){
$(this).siblings(".subtopic-frame").slideToggle("slow");
$(this).children(".expand").delay("100").fadeToggle();
});
});
});
console.log(data);
});
});
答案 0 :(得分:3)
不要在循环中注册click处理程序,在事件委托的帮助下将其注册到循环外部
$(document).ready(function () {
$.getJSON('/test/getsubtopics2.php', function (data) {
$.each(data.topics, function (name, value) {
$(".forum-topics").append('<div class="forum-topic-head"><div class="forum-topic-row"><div class="expand">+</div><div class="forum-title">' + value.topic_name + '</div></div><div class="subtopic-frame" id="' + value.topic_id + '"></div>');
$.each(value.subtopic_array, function (name2, value2) {
$("#" + value.topic_id).append('<div class="subtopic-name"><a href="/forums/topic.php?id=' + value2.subtopic_id + '">' + value2.subtopic_name + '</a></div><div class="num-threads"></div>');
});
});
console.log(data);
});
$(".forum-topics").on('click', ".forum-topic-row", function () {
$(this).siblings(".subtopic-frame").slideToggle("slow");
$(this).children(".expand").delay("100").fadeToggle();
});
});