.click() not working anymore jquery

Question

I have been using this jQuery before I use $.ajax(); and it was working good:

    $(document).ready(function(){
    var urlSerilize = 'some link';
    var appList = $("#applications > li > a");
    var appCheck = $('input[type=checkbox][data-level="subchild"]');
    var installbtn = $('#submitbtn');
    var form = [];
    var checked = [];

    //var appList = $(".body-list > ul > li");
    //var appCheck = $('input[type=checkbox][data-level="subchild"]');
    appList.click(function(){
        console.log('here!');
        if($(this).children().find("input").is(":checked")){
            $(this).children().find("input").prop('checked', false);
            $(this).children('form').removeClass('checked');
            $(this).removeClass("li-checked");
            var rmValue = $(this).children('form').attr('id');
            form = jQuery.grep(form, function(value) {
              return value != rmValue;
            });
        }else{
            $(this).children().find("input").prop('checked',true);
            $(this).addClass("li-checked");
            $(this).children('form').addClass('checked');
            form.push($(this).children('form').attr('id'));
        }
        console.log(form);
    });

    installbtn.on('click', function () {
        event.preventDefault();
        jQuery.each( form, function( i, val ) {
            console.log(val);
            var request = $.ajax({
                    url: urlSerilize,
                    type: 'GET',
                    data: $('#'+val).serialize(),
                    success: function( response ) {
                        console.log( response );
                        $('#applications').html();
                        $('#apps_box').html();
                    }
                });

            request.done(function(msg){
                console.log('Ajax done: ' + 'Yeah it works!!!');
            });

            request.fail(function(jqXHR, textStatus){
                console.log('failed to install this application: ' + textStatus);
            });
        });
    });
});

but after I used this ajax code the .click() jQuery event don't work anymore:

$(document).ready(function() {
    /* loading apps */
    //console.log('active');
    var request = $.ajax({
        url: 'some link',
        type: 'GET',
        dataType: 'html',
        data: {id: 0},
    })
    request.done(function(data) {
        console.log("success");
        $('#applications').empty().append(data);
    })
    request.fail(function() {
        console.log("error");
    })
    request.always(function() {
        console.log("complete");
    });
    //end loading apps

    var showmore = $('.showapps');
    showmore.click(function(){
        var parent = $(this).parent('.tv_apps');
        var displayC = parent.children('.body-list').css('display');
        console.log(displayC);
        if (displayC=='none') {
            parent.children('.body-list').show('400');
            $(this).children().find('img').rotate({animateTo: 180});
        }else{
            parent.children('.body-list').hide('400');
            $(this).children().find('img').rotate({animateTo: 0});
        };
    });
});

at first place I though it was because of the ajax loads and don't stop, then i was wrong. I have tried the window.load=function(); DOM function to load the script after Ajax finish loading and also was wrong. So please if there any idea to fix this problem, Thanks.

This is the event I want it to be fixed:

appList.click(function(){
    console.log('here!');
    if($(this).children().find("input").is(":checked")){
        $(this).children().find("input").prop('checked', false);
        $(this).children('form').removeClass('checked');
        $(this).removeClass("li-checked");
        var rmValue = $(this).children('form').attr('id');
        form = jQuery.grep(form, function(value) {
          return value != rmValue;
        });
    }else{
        $(this).children().find("input").prop('checked',true);
        $(this).addClass("li-checked");
        $(this).children('form').addClass('checked');
        form.push($(this).children('form').attr('id'));
    }
    console.log(form);
});

Instead of `$('.showapps').click(F)`, use `$(document).on('click', '.showapps', F)`. That way, you will have a global event handler that will also respond to new shopapps that will be added by the AJAX request. — GolezTrol, Nov 25 '14 at 11:09
possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — hon2a, Nov 25 '14 at 11:12
that event works great, the one i want to fix it is the one that add data to an array, it was working before i add ajax to the website. — Jeffery ThaGintoki, Nov 25 '14 at 11:19

score 2 · Answer 1 · answered Nov 25 '14 at 11:13

2

showmore.click(function(){

should be

$('.showapps').on('click', function(){

OR

$(document).on('click','.showapps', function(){

For dynamically added contents, you need to bind events to it.

For more info: http://learn.jquery.com/events/event-delegation/

answered Nov 25 '14 at 11:13

Roy M J

6,926
7
51
78

showapps works great the one is not working anymore is `appList.click()` – Jeffery ThaGintoki Nov 25 '14 at 11:24

score 0 · Answer 2 · answered Nov 25 '14 at 11:54

Thanks everyone, at last I have found the solution. It was a question of the DOM, when I use the ready method of jquery it loads an empty ul (without content), so then what I figured out in the first time was correct, all I did is to remove the ready and use a simple function that includes all the .click() events, then call it in request.done();. This is the solution:

function loadInstaller(){
    var urlSerilize = 'some link';
    var appList = $("#applications > li");
    var appCheck = $('input[type=checkbox][data-level="subchild"]');
    var installbtn = $('#submitbtn');
    var form = [];
    var checked = [];

    //...etc

};

$(document).ready(function() {
    /* loading apps */
    //console.log('active');
    var request = $.ajax({
        url: 'some link',
        type: 'GET',
        dataType: 'html',
        data: {id: 0},
    })
    request.done(function(data) {
        console.log("success");
        $('#applications').empty().append(data);
        loadInstaller();
    })

    //...etc
});

I hope this answer will help someone else :)

.click() not working anymore jquery

2 Answers2