How does the 'shown.bs.modal' event work?

The shown.bs.modal event is a custom mode-related Bootstrap event. Internally, Bootstrap uses functions that jQuery implements to work with such events: functions are on and trigger . To trigger an event, regardless of which one, the trigger function is used:

element.trigger("meuEventoCustomizado");

And to monitor the occurrence of the event, the on function is used:

element.on("meuEventoCustomizado", event => alert("Meu Evento Customizado"));

In this case, Bootstrap internally triggers the shown.bs.modal event with the trigger function. By the documentation, this event is triggered whenever a modal finishes being rendered and looking at the source code of this library, we can see:

const transitionComplete = () => {
  if (this._config.focus) {
    this._element.focus()
  }
  this._isTransitioning = false
  $(this._element).trigger(shownEvent)
}

Code snippet taken from the official repository , lines 263-269.

Notice that there is a call of $(this._element).trigger(shownEvent) , where shownEvent is defined as:

const shownEvent = $.Event(Event.SHOWN, {
  relatedTarget
})

Code snippet taken from the official repository , lines 259-261.

Where Event is defined by:

const Event = {
  HIDE              : 'hide${EVENT_KEY}',
  HIDDEN            : 'hidden${EVENT_KEY}',
  SHOW              : 'show${EVENT_KEY}',
  SHOWN             : 'shown${EVENT_KEY}',
  FOCUSIN           : 'focusin${EVENT_KEY}',
  RESIZE            : 'resize${EVENT_KEY}',
  CLICK_DISMISS     : 'click.dismiss${EVENT_KEY}',
  KEYDOWN_DISMISS   : 'keydown.dismiss${EVENT_KEY}',
  MOUSEUP_DISMISS   : 'mouseup.dismiss${EVENT_KEY}',
  MOUSEDOWN_DISMISS : 'mousedown.dismiss${EVENT_KEY}',
  CLICK_DATA_API    : 'click${EVENT_KEY}${DATA_API_KEY}'
}

Code snippet taken from the official repository , lines 45-57.

Finally, EVENT_KEY is defined by:

const DATA_KEY = 'bs.modal'
const EVENT_KEY = '.${DATA_KEY}'

Code snippet taken from the official repository , lines 23-24.

If you analyze all the values, you will see that the call will indeed be:

$(this._element).trigger("shown.bs.modal")

The fact that the event is always triggered for any modal is given by the reason that the trigger call is made within the method that is invoked for all modalities of the page. If it is in your interest to create an event that fires for all AJAX requests, you will need to call the trigger function inside some method that calls the AJAX call. If you're using jQuery's own $.ajax quer function to make calls, you can create a kind of proxy function :

function meuAJAX(url, settings) {
    // Dispara o seu evento:
    $(document).trigger("onRequireByAjax");
    // Efetua a chamada AJAX:
    $.ajax(url, settings);
}

And so, whenever you need to make an AJAX call:

meuAJAX({
  url: "localhost",
  method: "get",
  ...
});

And to monitor the event:

$(document).on("onRequireByAjax", event => alert("AJAX feito"));