How to run event right after $('div'). load(url)?

Question

I want to know how to make one $('#div-search').on('load', ()=>{alert('carregou');});

I have a div where there are several $('#div-search').load(url) in the code.
however now I need to perform a series of validations after loading it.

I have tried the following tests:

$('#div-search').on('load', ()=>{alert('carregou');});
$('#div-search').on('ready', ()=>{alert('carregou');});
$('#div-search').ready( ()=>{alert('carregou');}); 

and none of them had any effect.

P:"but pq tu não faz $('#div-search'). load(url,()=>{Alert('loaded');})´?"
R:
1. 'Cause I don’t want to have to search every call in code;
2. Why is it not always fixed $('#div-search'), is often a variable $(seletorId) and in addition to being harder to find, I would have to do an IF;

Answer 1

You can use the .ajaxComplete, which will be executed whenever an ajax request completes.

$( document ).ajaxComplete(function() {
  console.log('carregou')
});

If you need to differentiate requests, use the parameters passed to callback. Every time an ajax request is completed, an event object, the Xmlhttprequest object, and the configuration object used in creating the request are passed to the function you used in the .ajaxComplete. For example, if you want to restrict callback to respond only to a specific URL:

$( document ).ajaxComplete(function( event, xhr, settings ) {
  if ( settings.url === "google.com" ) {
    console.log( "Carregou. O resultado é" + xhr.responseText );
  }
});

Note:

• Starting from version 1.9 of jQuery, the method call .ajaxComplete() accurate be made from the document.

• If $.ajax()or $.ajaxSetup() are called with the value false allocated to the option global, the method .ajaxComplete() will not be fired.