Javascript 在 ajax 调用后中断

Question

我有一个项目列表。当单击一个时，我使用 javascript 显示更多信息的下拉列表。

javascript 适用于初始项目，但是当我使用 ajax 在此页面上动态加载新项目时，它会停止。

目前，Javascript被放置在页脚中。我尝试将其放置在代码中的不同位置，但无济于事。控制台中也不会显示任何错误。

我在这里遵循w3schools手风琴教程(https://www.w3schools.com/howto/howto_js_accordion.asp(，我正在使用来自Meta Fizzy的无限滚动(https://infinite-scroll.com/(

.HTML

<ul class="item-listings">
<li class="item">
<button class="accordion">Section 1</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>
</li>

爪哇语

var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
this.parentNode.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
} 
});
}

阿贾克斯

<script>
jQuery(function(a){a("ul.item-listings").infiniteScroll({path:".next",append:"li.item",button:".view-more-button",scrollThreshold:!1,loadOnScroll:!1,hideNav:".pagination",history:!1,status:".page-load-status",checkLastPage:!0});var b=a(".view-more-button");a=a("ul.item-listings");var c=!1;a.on("request.infiniteScroll",function(a,c){b.hide()});a.on("load.infiniteScroll",function(a,d,e,f){c||b.show()});a.on("last.infiniteScroll",function(a,d,e){b.hide();c=!0})});
</script>

我真的不知道该怎么办。有没有办法在每次我进行 ajax 调用时重新加载它，或者我的 javascript 可以以某种方式更改？我认为因为它使用了点击事件侦听器，所以会很好，但遗憾的是不是。

Answer 1

仅将事件侦听器添加到初始项，而不在新项添加后将其添加到新项。

你需要事件传播，基本上你把事件侦听器附加到更高的元素(例如所有项目的窗口、正文或容器(，然后在该事件侦听器上检查事件目标的 className 或其他什么。

既然你使用的是jQuery，你可以使用jQuery的方式来做到这一点，使用.on

所以这里是如何使用jQuery来做到这一点，如果你希望我可以用普通的JS重写。

$('.accordion').on('click', function() {
$(this).toggleClass('active');
$(this).parent().toggleClass('active');
const panel = $(this).next()
if (panel.css('maxHeight')) {
panel.css({ maxHeight: 'null'})
} else {
panel.css({ maxHeight: panel[0].scrollHeight + 'px' })
} 
});

可能有办法以jquery的方式获取scrollHeight，但是我已经很长时间没有做jQuery了，只是不记得了。