Ajax调用后Javascript中断

Question

I have a list of items. When one is clicked, I use javascript to show a dropdown of more information.

The javascript works for the initial items, but when I dynamically load new items on this page using ajax, it stops.

At the moment, the Javascript is placed in the footer. I've tried placing it in different places in the code but to no avail. No errors show up in the console either.

I'm following the w3schools accordion tutorial here ( https://www.w3schools.com/howto/howto_js_accordion.asp ), and I'm using infinte scroll from 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>

I'm not really sure what to do. Is there a way to reload this everytime I make the ajax call, or could my javascript be changed in some way? I thought that because it used a click event listener it would be fine, but sadly not.

Answer 1

You add event listeners to inital items only, but not on new items after they're added.

You need event propagation, basically you attach event listener to higher element (for example window, body or container of all items) and then on that event listener you check event target's className or whatever.

Since you are using jQuery, you can use jQuery's way to do that with using .on

So here is how to do it with jQuery, if you wish I can rewrite in plain 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' })
  } 
});

There is probably way to get scrollHeight in jquery way but I havent done jQuery for long time, just cant remember.