數據屬性未更新，並且onclick事件仍然存在

Question

我對此onclick事件效果有疑問： 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");
}

即使將data-readyzip更新為“是”值，onclick事件仍然存在，並且我無法下載文件...出了什么問題？

Answer 1

這段代碼：

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

找到所有相關的元素，當它運行 （與單擊處理程序掛接到它們） 的 。 以后您進行更改時，不會再重新檢查它們。

兩種選擇：

1. 如果願意，可以改用事件委托：

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

   這會將click事件掛在document ，然后檢查它是否通過與選擇器匹配的任何元素傳遞，同時從發生該事件的元素冒泡到document 。

   當然， document是處理此問題的一個很深的層次。 您可能希望將事件掛在靠近元素的容器上。

2. 由於只有一個按鈕，因此您可以鈎住該按鈕的單擊，但只有在具有相關屬性的情況下，才能對單擊進行操作：

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