Running jQuery after ajax complete fired from event

Question

I have the following code:

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

Whenever the .imageItem is clicked a separate script fires Ajax (I don't have control over the other script) which manipulates the DOM.

So the .imageTable briefly slidesUp and hides but then it re-appears after the AJAX DOM manipulation done by the other script.

I tried waiting until the Ajax was complete but this isn't working:

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

    $(this).slideUp();

   });
});

I'm not sure why it's not working.

Answer 1

You probably need to keep track of which item was clicked and then use that one to hide in 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);
});

You can see a working example in this fiddle , but as pointed by @charlietfl in comment it works if other script uses jQuery .