Call Function After Event Listener Completes - Javascript

Question

In Javascript, is there a way to call a function when an EventListener has completed running any attached code? I am using an external library that uses an EventListener, and when the Listener is called, it performs a certain action. I need to run my function after the external library's code finishes running.

I guess what I'm essentially asking for is a sort of EventListener that I can place on an EventListener, to see when an EventListener has completed its task.

I am not able to take the source code and put it in my own file, and I am also unable to directly place my function call at the end of the external library's EventListenerHandler in their code. I also do not initiate the Event or the EventListener, so I don't think I can place a callback function on it (I'm still new to Javascript so maybe, I'm not entirely sure). The event does not use AJAX.

EventListener --> EventListener --> Event

How can this be done ?

Here is a picture of my EventListeners. In my specific case, I want to execute the following piece of code after the External Library catches the Event with the has_many_add:after EventListener, and finishes running the code in the associated Handler :

$('select.user_select').select2({
  minimumInputLength: 2
})

The external library performs a callback when the button is clicked:

$(document).on('click', 'a.button.has_many_add', function(e) {
  var before_add, fieldset, html, index, parent, regex;
  e.preventDefault();
  parent = $(this).closest('.has_many_container');
  parent.trigger(before_add = $.Event('has_many_add:before'), [parent]);
  if (!before_add.isDefaultPrevented()) {
    index = parent.data('has_many_index') || parent.children('fieldset').length - 1;
    parent.data({
      has_many_index: ++index
    });
    regex = new RegExp($(this).data('placeholder'), 'g');
    html = $(this).data('html').replace(regex, index);
    fieldset = $(html).insertBefore(this);
    recompute_positions(parent);
    return parent.trigger('has_many_add:after', [fieldset, parent]);
  }
});

I can't change this code, and I need my function to go after this call to has_many_add:after EventListener. I tried using:

$(".button has_many_add").click(function(){
  $('select.user_select').select2({
    minimumInputLength: 2
  });
});

This code seems to execute before the external library's event handlers do though.

Answer 1

As long as your external library doesn't stop the event from bubbling you should be able to do this:

$(document).on('has_many_add:after', function(){
    //do your stuff
});