数据属性没有更新，onclick事件仍然在上面

data-attribute not updating and onclick event still on it

本文关键字：事件 在上面 onclick 更新 数据属性      更新时间：2023-09-26

我对这个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更新为"yes"值，onclick事件仍然在它上面，我无法下载我的文件…

代码:

$("#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;
    }
    // ...
相关文章：