Js eventListener wird beim Aufklappen des Bootstrap-Akkordeons zweimal ausgelöst ⇐ JavaScript

[Guest]

Ich habe 2 Seiten mit Bootstrap-Akkordeons. Bei einer Seite funktioniert alles wie erwartet, die andere löst jedoch immer zwei Ereignisse aus, wenn das Akkordeon ausgeblendet wird.
Die Seite, die gut funktioniert, löst nur einen Daten-Upload aus, während die Seite, die zweimal ausgelöst wird, dies getan hat etwas Lazy-Load-Logik vor den Upload-Anweisungen.
Dies ist der JS-Code für die Seite, die zweimal ausgelöst wird. Ein Beweis für die doppelte Auslösung ist, dass apiloginteraction.php den Datensatz zweimal in der Protokolldatenbank speichert.
Irgendeine Idee, was dies verursacht?
< pre class="lang-js Prettyprint-override">

Code: Select all

    var equipment_loaded = false;

async function addAccordionListeners() {
var collapseEquipment = document.getElementById('collapseEquipment');

if (collapseEquipment && !equipment_loaded) {
collapseEquipment.addEventListener('shown.bs.collapse', function() {
if (!equipment_loaded) {
phpFile = 'mequipment_content.php';
updateAccordionData('/presentation/mobile/' + phpFile, 'equipment-load-div', ['domEqmntSrc1'], ['domEqmntTgt1']);
equipment_loaded = true;
}

var scrollOffset = mainAccordion.scrollTop + collapseEquipment.parentNode.offsetTop
window.scroll({
top: scrollOffset,
left: 0,
behavior: 'smooth'
});

fetch('/api/apiloginteraction.php', {
method: 'POST',
body: JSON.stringify({
page: page,
section: 'equipment',
lan: document.getElementById("lan").value
}),
headers: {
'Content-type': 'application/json; charset=UTF-8',
}
})
});
}
}

Die Funktion zum Hinzufügen der Listener (jede Seite, die Arbeitsseite und die nicht funktionierende Seite, hat eine separate Funktion zum Hinzufügen der Listener) wird aus dem Hauptteil von aufgerufen die Seite so:

Code: Select all

    
$( document ).ready(function() {
window.scrollTo(0,0);
addAccordionListeners();
});

Die gesamte Lazy-Load-Logik befindet sich in der zweiten if-Anweisung. Es lädt einfach Inhalte, wenn das Akkordeon ausgeblendet wird, es sei denn, der Inhalt ist bereits geladen.
JS für die Arbeitsseite:

Code: Select all

    async function addInstructionAccordionListeners() {
var arrivalOne = document.getElementById('collapseOne');

arrivalOne.addEventListener('shown.bs.collapse', function () {
fetch('/api/apiloginteraction.php', {
method: 'POST',
body: JSON.stringify({
page: page,
section: sections.get('arrivalOne'),
lan: document.getElementById("lan").value
}),
headers: {'Content-type': 'application/json; charset=UTF-8',}
})
});
}