0

当处理 ajax 请求时，我想将按钮（实际上是 div）上的文本更改为“正在工作”。我还想禁止它们再次被点击，直到 ajax 进程结束。如果是，我想启用按钮并将文本更改回“保存”。

我正在考虑使用 JQuery .ajaxStart() 和 .ajaxStop() 全局事件来处理这个问题。像这样的东西：

$(document).ajaxStart(function () {
    $('#btnSave').each(function() {
        $(this).data('eventsbackup', $(this).data('events'));
        $(this).data('events', null);
        $(this).html('Working...');
    });
});

$(document).ajaxStop(function() {
    $('#btnSave').each(function () {
        $(this).html('Save');
        $(this).data('events', $(this).data('eventsbackup'));
        $(this).data('eventsbackup', null);
    });
});

你觉得这种方法有什么问题吗？我有点担心将 .data('event') 设置为 null 而不是使用 unbind()，但我无法确定按钮绑定了多少事件。这种方法会导致问题吗？

4

1 回答 1

3

我看到一个大问题，您使用的是 ID而不是类，所以只有FIRST按钮可能会受到影响。

将按钮更改为使用类，然后将 jQuery 更改为$(".buttons").each()

至于启用/禁用按钮，为什么不在按钮上使用is-disabled数据属性并在点击功能中对其进行测试。像这样的东西

<a href="#" id="get-files" class="button">Get Files</a>
<a href="#" id="get-folders" class="button">Get Folders</a>

示例点击代码

$("#get-files").click(function(e) {
    var isDisabled = $(this).data("is-disabled");
    if(!isDisabled) {
        // run Ajax Code
    }
}); // Do the same for #get-folders, even better wrap it in a reusable function

然后用你现有的代码做

$(document).ajaxStart(function () {
    $('.button').each(function() {
        $(this).data("is-disabled", true);
        $(this).html('Working...');
    });
});

$(document).ajaxStop(function() {
    $('.button').each(function () {
        $(this).html('Save');
        $(this).data("is-disabled", false);
    });
});
于 2012-05-23T21:23:06.710 回答