Eventlistener zeigt falsche Ziel

Question

Ich habe folgende JS-Code

var existingMenus = document.getElementsByClassName('multiSelectMenu'); 
for (var i = 0; i < existingMenus.length; i++) { 
    var existingMenu = existingMenus[i]; 
    var existingMenuHTML = []; 
    var targetChildren = existingMenu.parentElement.nextElementSibling.children; 
    console.log(targetChildren) 
    // Here I'm adding +1 to the ID as it appears starting at zero with a styled checkbox does not work correctly 
    for (var x = 0; x < targetChildren.length; x++) { 
     if (targetChildren[x].selected) { 
      existingMenuHTML += '<li><input class="dropdown-input" type="checkbox" id="' + (x + 1) + '" data-label="' + targetChildren[x].textContent + '" checked="true"/><label class="multiLabel" for="' + (x + 
       1) + '"><span></span> ' + targetChildren[x].textContent + ' </label></li>'; 
     } else { 
      existingMenuHTML += '<li><input class="dropdown-input" type="checkbox" id="' + (x + 1) + '" data-label="' + targetChildren[x].textContent + '"/><label class="multiLabel" for="' + (x + 1) + 
       '"><span></span> ' + targetChildren[x].textContent + ' </label></li>'; 
     } 
    } 
    existingMenu.innerHTML += existingMenuHTML; 
    console.log(existingMenuHTML) 
    var inputs = existingMenu.children; 
    console.log(inputs); 
    for (var w = 0; w < inputs.length; w++) { 
     var input = inputs[w].children[0]; 
     console.log(input); 
     input.addEventListener('click', function() { 
      console.log('--------------') 
      console.log(event) 
      var targetElement = event.target || event.srcElement; 
      console.log(targetElement); 
      var elementParent = targetElement.parentElement.parentElement.parentElement; 
      console.log(elementParent) 
      if (!elementParent.classList.contains('open')) { 
       elementParent.className += ' open'; 
      } 
      var multiList = elementParent.nextSibling.querySelector('[value="' + targetElement.dataset.label + '"]'); 
      console.log(multiList) 
      // Subtracting one to account for the plus one I added above 
      var inputId = targetElement.id - 1; 
      if (targetElement.checked == true) { 
       multiList.selected = "selcted"; 
      } else { 
       multiList.selected = ""; 
      } 
      console.log('--------------') 
     }); 
    } 
} 

Der Code funktioniert korrekt auf der ersten Instanz des Multipick aber alle anderen auf Seite Trigger die ersten multiSelectMenu Artikel, obwohl ich auf der 3. multiSelectMenu klickte Auf Seite.

ist hier ein Screenshot der Konsole

ist hier ein Code Stift, https://jsfiddle.net/6s3rc8d7/ Wenn Sie das ‚Etikett‘ klicken und nicht das Kontrollkästchen es das gleiche Problem habe ich zu sehen bin.

Answer 1

Der Grund hinter dem Erhalten der unterschiedlichen event.target in Ihrer Geige ist wegen des folgenden Codeausschnitts in Ihrem HTML.

<input class="dropdown-input" type="checkbox" id="1" data-label="English only"> 
<label class="multiLabel" for="1"><span></span> English only </label> 

Sie, dass in dem Etikett Element sehen können, haben Sie die für Attribut, das die id des Eingangselements enthält. Die Funktionalität von für Attribut ist, dass der Wert davon identifiziert, an welches Formularelement ein Label gebunden ist. Wenn Sie auf das Label klicken, wird das Klickereignis des begrenzten Elements simuliert. Wenn Sie also auf das Label klicken, ist in Ihrem Skript die event.target die Eingabe, mit der das Label verbunden ist.

Mehr auf für Attribut können Sie hier lesen. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

Answer 2

Ich war in der Lage, den Code zu überarbeiten und den EventListener dem Label anstelle des Kontrollkästchens hinzugefügt.