On Click Kinder Dynamischer Inhalt

Question

Ich habe ein Problem mit jQuery in dem Moment, wenn es um die Kinder eines Elements kommt, das dynamisch mit AJAX gezogen wurde.

So habe ich die folgende Aussage:

$('.Select-menu-outer').children().click(function() { 
    console.log("tiggered"); 
}); 

Dies gilt jedoch nicht aus irgendeinem Grund arbeiten, wenn ich die Kinder der .Select-menu-outer Element klicken nichts passiert.

Wenn ich die folgende Anweisung:

$(document).on("click", '.Select-menu-outer', function() { 
    console.log("tiggered"); 
}); 

Es löst aber ich es auf die Kinder dieses Elements auslösen möchten. Irgendeine Idee, wie ich das mit .on machen kann?

Dank

Answer 1

Immediate Kindselektor > ist .children() Verfahren gleichwertig. Sie müssen Wähler ändern unmittelbar untergeordnete Elemente zum Ziel:

$(document).on("click", '.Select-menu-outer > *', function() { 
    console.log("tiggered"); 
}); 

Answer 2

Wenn es dynamischer Inhalt Sie Folgendes tun müssen:

//This if you want a specific element within the parents' children 
$(document).on('click', '.Select-menu-outer > .Select-menu-inner', function() { 
    console.log('A .Select-menu-inner element was clicked'); 
}); 

//This if you want all the parents' children 
$(document).on('click', '.Select-menu-outer > *', function() { 
    console.log('A child element was clicked'); 
}); 

diesen Schnipsel sehen die Vorteile der Angabe eine innere Klasse

zu sehen

$(document).on('click', '.select-menu-outer > .select-menu-item', function() { 
 
    console.log('clicked %s', $(this).data('title')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="select-menu-outer"> 
 
    <li class="select-menu-item" data-title="first"> 
 
    First Item 
 
    </li> 
 
    <li class="select-menu-item" data-title="second"> 
 
    Second Item 
 
    </li> 
 
    <li class="select-menu-item" data-title="third"> 
 
    Third Item 
 
    </li> 
 
    <li class="select-menu-item-no-click"> 
 
    Can't Touch This 
 
    </li> 
 
</ul>

Answer 3

Von JQuery on Methode Dokumentation (http://api.jquery.com/on/):

.on(events [, selector ] [, data ], handler)

Die meisten Browser Ereignisse Blase oder verbreiten, aus dem tiefsten, innersten Element (das Ereignisziel) in dem Dokument, in dem sie den ganzen Weg auftreten bis zum Körper und dem Dokumentelement.

Wenn selector weggelassen wird oder null ist, wird der Ereignishandler als direkt oder direkt gebunden bezeichnet. Der Handler wird jedes Mal aufgerufen, wenn ein Ereignis für die ausgewählten Elemente auftritt, egal ob es direkt auf dem Element oder den Bubbles von einem (inneren) Nachkommenelement auftritt.

Wenn ein Selektor bereitgestellt wird, wird der Ereignishandler als delegiert bezeichnet. Der Handler wird nicht aufgerufen, wenn das Ereignis direkt auf dem gebundenen Element auftritt, sondern nur für Nachkommen (innere Elemente), die mit dem Selektor übereinstimmen. jQuery bubbelt das Ereignis vom Ereignisziel bis zum Element, an dem der Handler angefügt ist (d. h. innerstes zum äußersten Element), und führt den Handler für alle Elemente entlang des Pfads aus, der dem Selektor entspricht.

Von JQuery click Methode (http://api.jquery.com/click/):

Diese Methode ist eine Abkürzung für.auf („Klick“, handler) Lesen

So jene Auszüge können wir schließen, dass, wenn Sie Handler von click Methode auf Kinder von .Select-menu-outer =>Der Handler nicht aufgerufen wird, wenn das Ereignis direkt auftritt, auf dem gebundenen Elementbefestigungs , aber nur für Nachkommen.
Also, wenn .Select-menu-outer 's Kinder keine Nachkommen haben, würde keine Ereignisbehandlung sein.