jak odwołac sie do elementu który powstaje pozniej

Question

Hej. Mam pewien problem w jquery.
w html mam taki zapis: 

<div class="complete_task">
<ul></ul>
</div>

To jest Pierwsza funkcja która dodaje element li do ul

(".form_task").on("submit", function (e) {
completeTaskUl.append("<li>" + $task + "</li>");
});

 

I druga funkcja która chce się odwołać po najechaniu na li

$completeTaskUlLi.each(function () {
$this = $(this);
$this.on("click", function () {
console.log("pokaz");
}}
})

Jeśli  zapisze  const $completeTaskUlLi = $("odwolanie do li") tego nie widzi po li powstaje dopiero przez pierwsza funkcje

I teraz problem. Jak druga funkcja ma się odwołać do tych elementów li którego dopiero są po dodaniu po kliknięciu przez pierwsza funkcje. Jak te wszystkie li zapisze w zmienna globalna to do nich sie nie odwołam bo przy starcie ich nie ma, dopiero po wykonaniu pierwszej funkcji.
Chciałem aby pierwsza funkcja po kliknięciu i stworzeniu li zapisała je w zmiennej i przekazała globalnie abym mógł sie do nich odwołać ale nwm jak. Jak sobie z tym poradzić?

 

Kod jest skrócony, tylko najważniejsze rzeczy

Answer 1

Korzystasz już z metody on() ale chyba nie wiesz jak działa? Ta metoda służy do delegowania zdarzeń. Wystarczy, że podepniesz się pod listę  ul  i delegujesz zdarzenie do itema

$("ul").on("click","li",function(){
  $(this)
})

Oczywiście użyj klas zamiast tagów

Comments

Dzięki, zapomniałem o tym. Ale jak to połączyć z metodą .each()?
W elemencie ul znajduje się kilka elementów li.Jeśli najadę na jeden działa na wszystkich elementach li
 

$completeTaskUl.on("mousemove", ".item", function () {
    let $this = $("this");
    const $option = $(".complete_task .option");
    $option.fadeIn();
})

jak podłączyć do tego metode .each() czy jest jakiś inny sposób?

Tutaj jest to zadanie co pisze: https://codepen.io/jakubdofficial/pen/jXxPjz
Jeśli dodamy pare zadań pokazuje nam się lista po lewej stronie.
Po najechaniu na nią pokazuje nam się span z opcjami, o którym jest mowa.

linia 18 dodaje zadanie
linia 35 po najechaniu pokazuje spana z opcjami

 

---

No właśnie nie. $("this")  powinno wskazywać na element zdarzenia.

---

Tak, mam błąd, moje niedopatrzenie..
Ale mimo wszystko nie wiem jak dalej
Próbowałem tak

$completeTaskUl.on("mousemove", ".item", function () {

    let $this = $(this);
    const $option = $(".complete_task .option");
    $this.$option.fadeIn();
})

---

Za dużo kombinujesz i sam się gubisz. Jak nawołuje JQuery

Pisz mniej, rób więcej

$completeTaskUl.on("mousemove", ".item", function () {
 $(this).find(".option").fadeIn();
})

 

---

Super. Dzieki Ci bardzo :)