Click event doesn't fire after ajax event

Question

I have a checkbox styled using iCheck. This parts works fine. My problem is that i want to save the checkbox state in my database on every change. But my ajax request does only fire the first time.

I have a setup like this:

HTML:

<ul class='tasks'>
   <li><input type=checkbox rel='module' data='1' name=done[]  class='taskStatus'>Text</li>
</ul>

jQuery

$("input[type=checkbox]").on("ifClicked", function(){
    alert("init");

    var stateObj = {
        id: $(this).attr("data"),
        mode: $(this).attr("rel"),
        state: null
    };

    if($(this).prop("checked") === false){
        stateObj.state = 1;
    } else {
        stateObj.state = 0;
    }

    updateState(stateObj);
});


function updateState(stateObj){
    alert("updating");

    $.ajax({
        url: "moduleAjax.php?module=" + stateObj.mode + "&page=eventState",
        type: "POST",
        data: "obj=" + JSON.stringify(stateObj), 
        success: function(data){
            alert(data);
        },
        error: function(a, b, c){
            alert("error");
        }
    });
}

I've tried to comment out the ajax request. Doing so the alert boxes is firing as they should.

I have a workaround adding window.location.reload(); after alert(data). But in my opinion this shouldn't be necessary. I've also tried sending the request in async: false; mode with no success. I'm out of ideas.

Question

Why isn't the ifClicked event fired on every click, only the first, when the ajax request is sent?

Additional info

I get no errors in the console when executing the script. Neither any alerts the second run.

I haven't even been able to reproduce the problem in jsfiddle.

Anyone with any clue?

Edit

I just tested with the new iCheck beta source code. then the events get fired as they should, But a few other problems where raised. So this seems to be deriving from a bug i iCheck. (But i could be wrong).

Are you by any chance using $("input[type=checkbox]").one instead of $("input[type=checkbox]").on ? — rakeshjain, May 23 '14 at 18:30
$("input[type=checkbox]").on("ifClicked", function(){ ... Is an exact copy from the original source — Philip G, May 23 '14 at 18:31
And what does this "ifClicked" stand for? Tried ("input[type=checkbox]").on("click",function() { ? — rakeshjain, May 23 '14 at 18:32
@rakeshjain, It's apparently a custom iCheck event fired when the user clicks an input. — Josh Beam, May 23 '14 at 18:33
Are you sure your customer event is firing on the second click? As this code looks very much ok then — rakeshjain, May 23 '14 at 18:36
As the question title states: the click event is NOT fired the second time. Thats is my main problem. — Philip G, May 23 '14 at 18:37

score 0 · Answer 1 · answered May 23 '14 at 18:23

How about re-initializing your event handler after the Ajax response?

$(function () {
    initClickedHandler();
});

function initClickedHandler(){
    $("input[type=checkbox]").on("ifClicked", function(){
            alert("init");
            var stateObj = {
                id: $(this).attr("data"),
                mode: $(this).attr("rel"),
                state: null
            }

            if($(this).prop("checked") === false){
                stateObj.state = 1;
            }
            else{
                stateObj.state = 0;
            }
            updateState(stateObj)
    });
}


function updateState(stateObj){
    alert("updating");
    $.ajax({
        url: "moduleAjax.php?module=" + stateObj.mode + "&page=eventState",
        type: "POST",
        data: "obj=" + JSON.stringify(stateObj), 
        success: function(data){
            alert(data);
            initClickedHandler();
        },
        error: function(a, b, c){
            alert("error");
        }
    });
}

Also, you're missing a semi-colon after updateState(stateObj)

That where a typo in my question, not in the original code. Edited my code. — Philip G, May 23 '14 at 18:27
Also, try using the checkbox change event handler seen here: http://stackoverflow.com/questions/7031226/jquery-checkbox-change-and-click-event — Chris Fremgen, May 23 '14 at 18:28
No native events gets fired when using iCheck. For some reason i don't know. — Philip G, May 23 '14 at 18:30

score 0 · Answer 2 · answered May 23 '14 at 18:27

You might be able to avoid this issue altogether by using jQuery's .click() method (jsfiddle):

$('input[type="checkbox"]').on('click', function() {

    var stateObj = {
        id: $(this).attr("data"),
        mode: $(this).attr("rel"),
        state: null
    }

    if( $(this).prop('checked') === false ) {
        stateObj.state = 1;
    } else {
        stateObj.state = 0;   
    }

    updateState(stateObj);
});

function updateState(stateObj) {
    console.log(stateObj.state);   
}

I've tried this at first. But jQuery native .click() function isn't firing when using iCheck(). hence: on.("ifClicked"... — Philip G, May 23 '14 at 18:29

Click event doesn't fire after ajax event

2 Answers2