CODEWITHSUNDEEP
javascriptjqueryajaxappendjquery-click-event
Floeske
Floeske

Reputation: 110

Click event after append Jquery

I'm playing around with some Jquery, json and Ajax.

If the fa-plus got clicked it needs to disappear and fa-mines needs to show. the problem is it doesn't do anything. not even the console.log('clicked')

I've got document ready and: $(document).on('click', '.open', function() {}

I'm lost here.. hope you guys can help.

$(document).ready(function(){
    Cocktail.getAll().done(function(data){
        var list = $('.list-group');

        for (var i = 0; i < data.cocktails.length; i++) {
            list.append('<li class="list-group-item"><h3>' + data.cocktails[i].name + '</h3><i class="fa fa-plus"><i class="fa fa-minus hide"></i>');
        }

    }).fail(function(data){
        console.warn('fetching failed');
        console.warn(data);
    }).always(function(){
        console.log('this is what I always do');
    });


    var open = $('.fa-plus');
    var close = $('.fa-minus');

    $(document).on('click', '.open', function() {
        console.log('clicked');
        $(this).addClass('hide');
        close.removeClass('hide');

    });
});

Upvotes: 0

Views: 1069

Answers (1)

spozun
spozun

Reputation: 882

Instead of maintaining two elements, just update the class on a single element. then you don't need to show / hide.

$(document).on('click', '.fa', function() {
  $(this).toggleClass("fa-plus fa-minus");
});

Upvotes: 1

Related Questions