亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Ich habe einen dynamischen Selektor (linkTrigger), der Klicks auf ein Element erfassen soll. Ich wei? nicht, was linkTrigger sein k?nnte oder ob es einige Kinder haben wird. Wenn ich jQuery verwende, ist alles in Ordnung.

Wenn Sie auf das erste grüne Rechteck klicken (nicht auf den Zahlenteil), sehen Sie, dass alle drei Handler wie erwartet funktionieren. Wenn Sie jedoch auf die Zahl im ersten grünen Rechteck klicken, funktionieren nur jQuery- und Javascript2-Handler, wiederum wie erwartet , weil das Klicken auf die Spanne im grünen Feld die folgenden Kriterien nicht erfüllt:

if (e.target.classList.contains(linkTrigger.substring(1))) {

Ich kann css point-events none nicht für Kinder verwenden. Ich m?chte nicht angeklickt werden, weil ich nicht wei?, was linkTrigger ist, und ich m?chte mich nicht mit seinem Inhalt herumschlagen.

Das Problem ist, dass der Javascript2-Handler nicht dynamisch ist, was bedeutet, dass ich diesen Handler zu jedem neuen ?.a“-Feld hinzufügen muss, das ich sp?ter im Dom hinzufüge.

Gibt es eine bessere L?sung?

var linkTrigger = '.c'

//jquery works fine and its live

$('.wrap').on('click', linkTrigger, function(e) {

  var parent = $(this).closest('.a'),
    id = parent.attr('data-id')

  console.log('jquery: ' + id)

})

//javscript works but not if we click on child (number span inside green rectangle) and its live. I cant use **css point-events none** on children I dont want to be clicked because I dont knwo what **linkTrigger** is, neither I want to mess with its contents.

document.querySelector('.wrap').addEventListener('click', function(e){

  if (e.target.classList.contains(linkTrigger.substring(1))) {
    var parent = e.target.closest('.a'),
      id = parent.getAttribute('data-id')

    console.log('js: ' + id)
  }

})

//javscript2 works but its not live, meaning if I add more ".a" containers I have to attach this function call to each item.

document.querySelectorAll(linkTrigger).forEach(function(el){

   el.addEventListener('click', function(e){

       var parent = e.target.closest('.a'),
      id = parent.getAttribute('data-id')

        console.log('js2: ' + id)

   })
})

.a{
  
  width:300px;
  height:300px;
  background:red;
  margin:1px;
  
}
.b{
  
  width:200px;
  height:200px;
  background:blue;
  
}
.c{
  
  width:100px;
  height:100px;
  background:green;
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="wrap">

  <div class="a" data-id="0">
    <div class="b">
      <div class="c"><span>657567645</span></div>
    </div>
  </div>

  <div class="a" data-id="1">
    <div class="b">
      <div class="c"></div>
    </div>
  </div>

</div>