在 ajaxComplete 事件触发时单击按钮时存储变量以供使用

Question

我在同一个类的页面上有 4 个按钮。 当单击这些按钮中的任何一个时，将触发一个 Ajax 事件，我使用 ajaxComplete 来侦听该事件。 问题是，如果我一个接一个地点击一个按钮，分配给第一个的变量似乎会覆盖第二个，所以第二个的动作不会发生。

我将特定于元素的命名空间附加到单独的 ajaxComplete 处理程序中，但这并没有解决问题。 我可能缺少或没有使用明显的东西。

正如我所看到的，主要问题是我根据单击的最后一个按钮存储 ID，因此当触发事件时，它会影响错误的元素。 （分配给$sheetBlock的最新变量）。 我需要在点击事件对应的按钮时存储这些变量。

一些警告——我不能向 html 元素添加任何额外的属性，但是，每个受影响的按钮和元素都有自己的 ID。

我认为将$flippyFunc函数存储在 var 中并在按下每个按钮时运行将允许我在每个按钮被单击时存储每个按钮的 ID，并与每个 ajax 事件一起使用。 我怎样才能做到这一点？

var $id = null;
var $laddaButtons = [];
var $it = null;
var $results = [];
var $sheetBlock = [];

var runOnAjax = function(button, id){
    $(button).off('mousedown.button');
    $sheetBlock[id] = $('#'+button.parentNode.parentNode.parentNode.parentNode.id);
};
var $flippyFunc = function($id){
    $sheetBlock[$id].flippy({
    //options
    });
};

$('.ladda-button').on('mousedown.this', function(e) {
    $id = this.id;
    $it = this;
    runOnAjax($it, $id);
    $(document).on("ajaxComplete."+$id, function(e) {
        $(document).off("ajaxComplete."+$id);
        $flippyFunc($id);       
    });
});

Answer 1

我能够将我需要的变量从 ajaxSend 事件的设置对象传递到相应的 ajaxComplete 事件的设置对象。 它很简单：

$(document).on("ajaxSend"), function(e, xhr, settings) {
    settings.buttonID = $id;
}

然后在触发相应的 ajaxComplete 事件时访问 buttonID 变量：

$(document).on("ajaxComplete"), function(e, xhr, settings) {
    $id = settings.buttonID;

    // Now I can use `$id` as it was when the ajaxSend event was triggered.
}