Question

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

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

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

我在这里（https://www.w3schools.com/howto/howto_js_accordion.asp）正在关注w3schools手风琴教程，并且正在使用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？我以为，因为它使用了click事件监听器，所以很好，但可惜不是。

Answer 1

您只能将事件侦听器添加到初始项，而不能将它们添加到新项上。

您需要事件传播，基本上是将事件侦听器附加到较高的元素（例如，所有项目的窗口，主体或容器），然后在该事件侦听器上检查事件目标的className或其他内容。

由于您使用的是jQuery，因此可以使用jQuery的方法来使用.on

如果您希望我可以用普通的JS重写，那么这就是使用jQuery的方法。

$('.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了，只是想不起来。

Ajax调用后Javascript中断

1 个答案: