data-attribute not updating and onclick event still on it

Question

I have a problem with this onclick event effect : http://jsfiddle.net/WL6DX/1/

/* '#generateZip' */
$("#generateZip[data-readyzip='start']").click(function(event) {

        event.preventDefault();

        /* change style/css */
        $('#generateZip').addClass("disabled");
        $('#generateZip').html("<i class=\"fa fa-spinner fa-spin\"></i> in progress !");

        /* call the zip */
        jQuery.ajax({
        type: 'POST',
        url: 'http://www.monde-du-rat.fr/API/zipMC.php',
        timeout: 8000,
        dataType: 'text',
        data: {
            call: 'yes'
        },
        "success": function (jqXHR, textStatus, errorThrown) {
            console.log("AJAX success :) - statut " + textStatus);
            /* change attributs */
            $('#generateZip').attr('data-readyzip', 'yes');
            setTimeout(readyZip, 3000);
        },
        "error": function (jqXHR, textStatus, errorThrown) {
            console.log("AJAX fail :/ - statut " + textStatus);
            /* change attributs */
            $('#generateZip').attr('data-readyzip', 'no');
            setTimeout(readyZipFAIL, 3000);
        }
        });

});

/* readyZip() */
function readyZip() {
    $('#generateZip').removeClass("disabled btn-primary");
    $('#generateZip').addClass("btn-success");
    $('#generateZip').html("download is ready !");
    $('#generateZip').attr("href", "http://www.monde-du-rat.fr/resources/data/documentMC.zip")
}

/* readyZipFAIL() */
function readyZipFAIL() {
    $('#generateZip').removeClass("btn-primary");
    $('#generateZip').addClass("btn-danger");
    $('#generateZip').html("problem");
}

even if data-readyzip is updated to "yes" value, the onclick event is still on it and i fail to download my file ... what's wrong ?

Answer 1

This code:

$("#generateZip[data-readyzip='start']").click(function...

finds all of the relevant elements as of when it was run (and hooks up a click handler to them). It doesn't recheck them again later when you change things.

Two options:

1. If you like, you can use event delegation instead:

    $(document).on("click", "#generateZip[data-readyzip='start']", function... 

   That hooks the click event on document , and then checks to see if it passed through any elements matching the selector while bubbling up to document from the element on which the event originated.

   document is, of course, a very deep level to be handling this. You might want to hook the event on a container closer to the element.

2. Since there's just one button, you can hook click on the button but only act on the click if it has the relevant attribute:

    $("#generateZip").click(function(e) { if ($(this).attr("data-readyzip") !== "start") { // Don't do it; prevent default or cancel bubbling if you like return; } // ...