Jquery - to do

Odpowiedz Nowy wątek
2017-08-12 21:28
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ę?

Pozostało 580 znaków

2017-08-12 22:18
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/

edytowany 1x, ostatnio: MrWeb, 2017-08-12 22:21
Tak, po kliknięciu w ikonke font-awesome, dany task powinien zniknąć. Tak jak kolega niżej wspomniał problem polega na tym, że są to elementy dodane dynamicznie... - Xoxepin 2017-08-13 19:22

Pozostało 580 znaków

2017-08-12 22:22
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.

Dokładnie, element jest dodawany dynamicznie stąd zrodził się problem, niestesty ten sposób równiez nie spełnia swojego zadania - Xoxepin 2017-08-13 19:24

Pozostało 580 znaków

2017-08-13 19:43
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ę?:)

Pozostało 580 znaków

2017-08-13 20:24

W takim wypadku potrzebujesz tego: http://learn.jquery.com/events/event-delegation/

https://jsfiddle.net/L4hfb8dm/4/

Wielkie dzięki, własnie tego było i trzeba :) - Xoxepin 2017-08-13 20:45

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

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