Wie behandelt man ein delegiertes Ereignis nur für untergeordnete Elemente?

Question

Wenn Delegieren Ereignisse .on mit, wie richte ich Kind-Elemente:

ich versucht habe: childSelector =

• >*
• >:nth-child(n)

Aber nichts ausgewählt ist, wenn ich mit > starten.

$(selector).on(event, childSelector, handler); 

Manchmal mag ich ein direktes Kind zum Ziel, manchmal weiß ich nicht: (Pseudocode)

var func = function(selector, subSelector) { 
    $(selector).on("click", subSelector, function() { 
     alert("my subSelector is clicked"); 
    }); 
} 

func("#wrapper", "direct-child-selector"); 
func("#wrapper", ".some .other > .selector:first"); 

Das ist, warum ich für einen Wähler bin gefragt und nicht eine Lösung.

Answer 1

Sie konnte Prüfung innerhalb des Handler, ob das Elements ist ein Kind des Elements, an das der Ereignishandler delegiert wurde;

$(selector).on("event", '*', function (e) { 
    if (e.target.parentNode === e.delegateTarget) { 
     // Woo! 
    } 
}); 

Siehe e.delegateTarget. Es ist erwähnenswert, dass e.delegateTarget in jQuery 1.7 eingeführt wurde, so dass ältere Versionen nicht funktionieren.

In Bezug auf Ihre zweite Bearbeitung, in seiner aktuellen Form sind die Selektoren mehrdeutig; Es gibt keine Möglichkeit für Sie, in Code und in seiner aktuellen Form festzustellen, ob der übergebene Selektor ein Nur-Kind-Selektor sein soll. Sie können entweder einen anderen Parameter eingeben, um anzugeben, ob es sich um einen Nur-Kind-Selektor handeln soll, oder am Anfang des Selektors eine > hinzufügen (z. B.) und prüfen, ob dies der Fall ist;

var func = function(selector, subSelector, isChild) { 
    $(selector).on("click", subSelector, function(e) { 
     if (isChild && e.parentNode == e.delegateTarget || !isChild) { 
      alert("my subSelector is clicked"); 
     } 
    }); 
} 

func("#wrapper", "direct-child-selector", true); 
func("#wrapper", ".some .other > .selector:first" /* , `false` is optional */); 

Oder:

var func = function(selector, subSelector) { 
    if (subSelector.charAt(0) === '>') { 
     subSelector = selector + subSelector; 
    } 

    $(selector).on("click", subSelector, function(e) { 
     alert("my subSelector is clicked"); 
    }); 
} 

func("#wrapper", "> direct-child-selector"); 
func("#wrapper", ".some .other > .selector:first"); 

Answer 2

Eine Möglichkeit, nur Delegierten Ereignisse auf direkte Kindern ausgelöst ist einen vollständigen Wähler auf on() zu schaffen, den Teil, der die das übergeordnete Element entspricht:

$(selector).on("event", selector + " > *", handler); 

Answer 3

Alles, was Sie brauchen, ist:

childSelector = "*"; 

wenn es ein Kind des Wählers entsprechen angenommen hat. Es wird nur im Bereich des Selektors gesucht.

Answer 4

Das funktionierte für mich.

$('#container').on('click', '> .children', function(){ 
... 
})