Jquery - to do

0

Witam, problem jest następujący:

$('#add_task').on('click',function(){
	var new_item = $('#new_task').val();
	$('#todolist').append('<li>' + new_item + ' <i class="fa fa-times" aria-hidden="true"></i> </li>');

Kiedy #add_task zostanie kliknięty wykonue funkcje:
-przypisuje do zmiennej new_item wartość wpisaną w inpucie
-odwołuje się do listy żeby dodawac kolejno wpisane taski i tutaj jest problem.

Na sztywno mam wklepane dwa text</li>, po kliknięciu w ikonke z fontAwesome te dwa taski (domyślne) znikają, niestety z nowo dodanych tasków NIE (mimo, że w konsoli pokazuję, że mają klase do której się odwołuje celem zdarzenia)

$('.fa').click(function() {
	$(this).parent('li').fadeOut('slow');
});

Chciałem to własnie w ten sposób załatwić, jakieś propozycję?

0

Jakbyś dorzucił HTML byłoby łatwiej podpowiedzieć, ale domyślam się, że żle odwołujesz się przez parent.

Tu coś naskrobałem na podstawie Twojego kodu (rozumiem, że po kliknięciu w ikonkę font awesome, taski mają znikać?):

https://jsfiddle.net/L4hfb8dm/1/

1

Dzieje się tak gdyż jest to dynamicznie dodany element. Aby brać po uwagę również te elementy możesz skorzystać z on

$('#staticDiv').on('click', 'yourSelector', function() {
  //do something
});

Gdzie staticDiv to jakiś element nadrzędny nad elementami z klasą fa. yourSelector to fa.

0

HTML

  <div class="app">
    <input id="new_task" type="text" name="new_task"/>

    <input id="add_task" type="submit" value="ADD TASK" />


    <ol id="todolist" contenteditable="true">
        <li>Learn TypeScript<i class="fa fa-times" aria-hidden="true"></i></li>
        <li>Learn Vue<i class="fa fa-times" aria-hidden="true"></i></li>
    </ol>
  </div>

JQUERY:

$('#add_task').on('click',function(){
	var new_item = $('#new_task').val();
	$('#todolist').append('<li>' + new_item + ' <i class="fa fa-times" aria-hidden="true"></i> </li>');
});

$('.fa').click(function() {
    $(this).parent().find('li').fadeOut('slow');
});

Wszystko ładnie pięknie, problem się zaczyna gdy po dynamicznym dodaniu danego elementu li z ikonką font-awesme, chcę go usunać. (Te dwa które sa na sztywno wpisane w kodzie ok-działa), po kliknięciu w ikonkę docelowo LI w którym jest kliknięta ikonka ma zostać usunięty/zniknąc.

Szukam rozwiązania i brakuje mi czegoś w stylu
*Po kliknięciu na element X
*Odwołaj się to "this -> li" -> remove

Jakieś propozycję?:)

1 użytkowników online, w tym zalogowanych: 0, gości: 1