ajax 调用后 JavaScript 中断

Question

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

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

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

我在这里遵循 w3schools Accordion 教程 ( 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>

Javascript

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";
    } 
  });
}

Ajax

<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

您只能向初始项目添加事件监听器，而不能在添加后的新项目上添加事件监听器。

您需要事件传播，基本上您将事件监听器附加到更高的元素(例如窗口、主体或所有项目的容器)，然后在该事件监听器上检查事件目标的类名或其他内容。

由于您使用的是 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了，只是不记得了。