如何在 Ajax 触发元素上监听 Ajax 事件？

Question

In my HTML document I have this code:

<a id='ajax-trigger' href='...', data-one='...'>
  Trigger AJAX!
</a>

And in a external, not my own and uneditable JS library I have something like this:

$('#ajax-trigger').on('click', function() {
  $.ajax({
    type: "POST",
    url: a.attr('href'),
    data: postData,
    dataType: 'json',
    success: function(data) {
      // handle Ajax success...
    },
    error: function(jqXHR, textStatus, errorThrown) {
      // handle Ajax error...
    }
  });
});

With the above code in place, when the <a> link is clicked then the Ajax request is triggered.

Now, to further manipulating the DOM after a success Ajax response, I'm looking for a way to listen the success Ajax response local event related to the Ajax triggering element without changing the JS library source code. That is, I would like to add an Ajax success event listener for the <a> element in the HTML document without changing the original JS library. Maybe, something like this (note: ajaxSuccess is just an example):

<a id='ajax-trigger' href='...', data-one='...'>
  Trigger AJAX!
</a>

<script type="text/javascript">
  $(document).ready(function() {
    $('#ajax-trigger').on('ajaxSuccess', function() {
      // handle Ajax success in addition to the 
      // Ajax success handler in the JS library...
    });
  });
</script>

Is it possible with jQuery/JS?

Answer 1

Using just your code and adding pure JS - solution 2 answers your question.

Btw.: why do you need to add this event/event listener? If you want a function to be executed after your successful ajax call, all you need to do is call the function as part of your $.ajax success

Solution 1:

$('#ajax-trigger').on('click', function() {
  $.ajax({
    type: "POST",
    url: a.attr('href'),
    data: postData,
    dataType: 'json',
    success: function(data) {
      // handle Ajax success...
      myAjaxSuccessFunction();
    },
    error: function(jqXHR, textStatus, errorThrown) {
      // handle Ajax error...
    }
  });
});

function myAjaxSuccessFunction() {
    //do some stuff
}

Solution 2: fire an actual event on the element, and have a listener on the element for that kind of event.

//create the event
var myAjaxSuccessEvent = new Event('AjaxSuccessEvent');

//attach the event to the HTML element
var myHTMLelement = document.getElementById('my-element');
myHTMLelement.addEventListener('AjaxSuccessEvent', function() {
    //do something
    alert("Event fired");
});

//or attach the listener like this, in your case
$('#ajax-trigger').on('AjaxSuccessEvent', function() {
  // handle Ajax success in addition to the 
  // Ajax success handler in the JS library...
});

//fire the event after successful AJAX call
$('#ajax-trigger').on('click', function() {
  $.ajax({
    type: "POST",
    url: a.attr('href'),
    data: postData,
    dataType: 'json',
    success: function(data) {
      // handle Ajax success...
      myHTMLelement.dispatchEvent(myAjaxSuccessEvent);
      var myElement = document.getElementById('ajax-trigger');
      myElement.dispatchEvent(myAjaxSuccessEvent);
    },
    error: function(jqXHR, textStatus, errorThrown) {
      // handle Ajax error...
    }
  });
});

Solution 3: without the custom event You can't add an event listener unless there's an actual event you're subscribing to. If you don't want to add a custom event, you'll have to fire one of the existing events.

//fire the event after successful AJAX call
$('#ajax-trigger').on('click', function() {
  $.ajax({
    type: "POST",
    url: a.attr('href'),
    data: postData,
    dataType: 'json',
    success: function(data) {
      // handle Ajax success...
      // use an existing event
      var getMyElement = document.getElementById('ajax-trigger');
      getMyElement.onchange();
    },
    error: function(jqXHR, textStatus, errorThrown) {
      // handle Ajax error...
    }
  });
});

$('#ajax-trigger').on('onchange', function() {
    //do something
});