从事件触发Ajax完成后运行jQuery

Question

我有以下代码：

$(document).on('click', '.imageItem', function(event) {
    $(this).slideUp()
});

每当单击.imageItem时，都会触发一个单独的脚本来操纵DOM，而Ajax（我对其他脚本没有控制权）会触发该脚本。

因此.imageTable会短暂地滑动并隐藏，但是在其他脚本完成AJAX DOM操作之后，它会重新出现。

我尝试等待直到Ajax完成，但这不起作用：

$(document).on('click', '.imageItem', function(event) {
  $(document).ajaxComplete(function() {

    $(this).slideUp();

   });
});

我不确定为什么它不起作用。

Answer 1

您可能需要跟踪单击了哪个项目，然后使用该项目隐藏在ajaxComplete ：

$(document).ajaxComplete(function (event, xhr, settings) {
    if (img) {
        img.slideUp('slow');
        img = null;
    }
});

//To keep track of what item was clicked
var img = null;

$(".imageItem").on("click", function () {
    img = $(this);
});

您可以在此小提琴中看到一个有效的示例，但正如@charlietfl在注释中指出的，如果其他脚本使用jQuery它也可以工作。