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更新为＆＃34; yes＆＃34;值，onclick事件仍然在它上面，我无法下载我的文件......出了什么问题？

Answer 1

此代码：

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

查找运行时的所有相关元素（并将点击处理程序挂钩到它们）。当你改变时，它不会再次重新检查它们。

两个选项：

如果您愿意，可以改为使用事件委派：
```
$(document).on("click", "#generateZip[data-readyzip='start']", function...
```
挂钩click上的document事件，然后检查它是否通过与选择器匹配的任何元素，同时从事件源自的元素冒泡到document
当然，
document是处理这个问题的一个非常深层次的问题。您可能希望将事件挂钩到靠近元素的容器上。

由于只有一个按钮，您可以点击该按钮，但只有在具有相关属性的情况下才对该点击起作用：

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

数据属性未更新，onclick事件仍在其上

1 个答案: