Triggerung .click() innerhalb der Liste Element gibt Fehler

Question

Ich habe eine Liste, in der es entweder reinen Text oder einen Link innerhalb sein kann. Wenn ein Link verfügbar ist, muss das gesamte Listenelement anklickbar sein. Also, wenn ich dies tun:

if ($('.link').length) { 
    $('li[data-contains-link]').on('click', function (e) { 
     $('.link').click()  
    }) 
} 

es gibt mir den Fehler: Uncaught RangeError: Maximum call stack size exceeded

ist es eine Möglichkeit, dies zu vermeiden?

Answer 1

Sie rufen ein Klickereignis nach einem Klickereignis auf - wahrscheinlich ein rekursiver Aufruf. Stellen Sie sicher, dass kein li[data-contains-link] ein .link ist, sonst wird dies eine Endlosschleife bilden.

Answer 2

$ ('link ') ist entweder innerhalb $ (' Li [data-contains-link] ')

oder

einige $ (' Li [data-contains-link]') hat Klassenverbindung.

Dies bringt Sie in eine Schleife des Zuhörens eines Klicks und dann generieren es auf sich selbst oder eines seiner Kinder, also Rekursionen.

Answer 3

Try event.stopPropagation() in den .link ‚s Click-Handler hinzu:

$('li[data-contains-link]').on('click', function (e) { 
    $('.link').click();  
}) 

$('.link').on('click', function (e) { 
    e.stopPropagation(); // <---addd it here. 
    console.log('.link elem clicked!!!!');  
}) 

---

Da dieser Attributselektor li[data-contains-link] heißt es, dass es ein übergeordnetes Element ist, das ein .link Element verfügt. Wenn Sie ein click -Ereignis auf das übergeordnete Element gebunden haben und den Klick auf das untergeordnete Element auslösen, wird ein rekursiver Aufruf ausgelöst, der den folgenden Fehler verursacht: Uncaught RangeError: Die maximale Aufrufstapelgröße wurde überschritten.

Das ist wegen Ereignis sprudelnd. event.stopPropagation() kann verwendet werden, um zu verhindern, dass das Ereignis zum übergeordneten Element übergeht. Daher wird kein rekursiver Aufruf ausgeführt, da das übergeordnete Element das Ereignis nicht erhält.