HTML seznam ul li - volání metody pouze potomka

Elegantni reseni: event.stopPropagation()

Mrkni na to

To je mi známo.

Našel jsem konkrétně:

$('li').click(function(event) {
if (this === event.target) {
// do your code
}
});

ale nevím, jak dostat do // do your code
parametr onclick funkce. Prostě, abych tam zavolal to:
ajaxLoadURL('HENECRYL1K-2K');

Ve frontendu se nepohybuju, ale co je mi známo, tak $('li') znamená, že se má najít prvek s id 'li'. Nebo je to jinak? Každopádně pokud ano, tak potom stačí přidat "id" attribute nějakému konkrétnímu prvku a potom na něj navázat onclick event s konkrétní hodnotou.

Potom to může vypadat nějak takto

<li id="prvek"></li>
<script>
$("prvek").click(function(event) {
    if (this === event.target) {
        ajaxLoadURL('HENECRYL1K-2K');
    }
});
</script>

Případně by šlo využít to "vybublání", ale tímhle si nejsem moc jistej

$("nejvyssi_prvek").click(function(event) {
    if (event.target === $("nizsi_prvek")) {
        ajaxLoadURL('HENECRYL1K-2K');
    } else (event.target === $("jiny_nizsi_prvek")) {
        ajaxLoadURL('HENECRYL1K-5K');
    }
});

Děkuji za radu, ale tohle si nemohu dovolit.

V mém případě je dokonce použita komponenta:

https://www.jstree.com/demo/ jsTREE

A těch prvků tam mám opravdu hodně, takže bych se upsal....

https://www.jstree.com/api/#/

sem jsi se díval?

Edit: a hlavně sem? https://github.com/vakata/jstree

Dívám se tam, ale nenacházím, co potřebuji.

Můj strom zkrátka reprezentuje zboží.
Při klepnutí na položku potřebuji přes ajax natáhnout text do divu (dynamicky přes Ajax).

Je ale úplně k zlosti, když uživatel klikně na kategorii (zobrazí se mu obecný popis kategorie) a
potom klikne na konkrétní položku a ta jen "problikne" a zůstane zobrazen obecný název z nadřazené kategorie.

Chápeš, co myslím.

A co třeba ten event "selected"? Podívej se co ti vrací. Pak v konfiguraci (json) budeš moct přidat vlastní data, která jsou spojená s tím nodem a následně je v tom eventu použít

Edit: https://www.jstree.com/api/#/?f=select_node.jstree

Ale tohle všechno bys si měl hledat sám

Ak to chceš mať inline v atribúte, tak môžeš použiť premennú event, ktorá je implicitne nastavená: onclick="ajaxLoadURL(event, 'HENECRYL1K-2K')". Následne v ajaxLoadURL zavoláš stopPropagation.

Ak to chceš lepšie, tak namiesto inline JavaScriptu nastavíš všetko deklaratívne a JavaScript následne nainicializuješ. V tom prípade dáš rootu nejaký identifikátor (dajme tomu, že ten child_node_1, ktorý tam už máš) a URL nastavíš do dátových atribútov: <li data-url="HENECRYL1K-2K">. Obsluhu JavaScriptom potom budeš mať na jednom mieste a bude vyzerať zhruba takto:

const tree = document.getElementById('child_node_1');
tree.onclick = event => {
    const item = event.target.closest('li');
    if (item.dataset.url) {
        ajaxLoadURL(item.dataset.url);
    }
}

Kód som písal z hlavy, tak tam môžu byť chyby.

Děkuji za navržená řešení.

Zkoušel jsem obě.
První nefunguje, ale druhé je ještě lepší a funkční.

Toto je ukázkové řešení potíže ve vláknu.

Jste super.