How to assign target="_Blank" to all external links after ajax has finished loading?

Question

Hello, I have a wordpress blog where I need all external links to be opened in a new tab when clicking. But these links are loaded by ajax and the function I have is executed before ajax finishes loading everything.

$(function() {
$("a[href^='http']:not([href*='zaha.in'])").each(function() {
   $(this).click(function(event) {
         event.preventDefault();
         event.stopPropagation();
         window.open(this.href, '_blank');
    }).addClass('externalLink');
});
});

So I tried through javascript to set a time interval to give time to run the jquery function after ajax finished, however also does not work:

  // Instanciar a função
   niceJavascriptRoutine = null;

    // Inicio do jquery
    $(document).ready(function() {

        // Função jquery
        function niceJqueryRoutine() {
            $(function() {
               $("a[href^='http']:not([href*='zaha.in'])").each(function() {
                   $(this).click(function(event) {
                         event.preventDefault();
                         event.stopPropagation();
                         window.open(this.href, '_blank');
                    }).addClass('externalLink');
               });
            });
        }
        // Passa a função jquery para a javascript
        niceJavascriptRoutine = niceJqueryRoutine;

    });
    window.setInterval(niceJavascriptRoutine,  22000);

Would anyone know any way to accomplish this after the ajax fully loads? Detail that I can not edit the files of the ajax request because they are part of a wordpress plugin, then I would need this to occur outside.

Answer 1

You can try adding the attribute target at the links:

$("body, document").on("click", "a[href^='http']:not([href*='zaha.in'])", function(e){
    $(this).attr("target", "_blank");
});

This way it will work on all the dynamic elements that will be generated by ajax after loading the page, because an event is added in "body, Document"

Answer 2

In my view no need to assign click events to links <a>, just insert the attribute target="_blank" which will already open in a new guide.

Since you don’t know how long it will take Ajax to process, one way is to create a running setInterval until you find an external link set in your selector. As soon as the if in setInterval is met, it means that Ajax has been processed and the links have been inserted, so just add the attribute target to all links at once, without the need for a link .each.

See how it looks:

$(document).ready(function(){

   var niceJavascriptRoutine = setInterval(function(){

      var as = $("a[href^='http']:not([href*='zaha.in'])");

      if(as.length){
         as.attr('target', '_blank')
         .addClass('externalLink');
         clearInterval(niceJavascriptRoutine);
      }
   }, 1000);

});

The setInterval will be running every second, and when there is an element in the page that was defined in the variable as, will apply the target to all elements and stop the setInterval.

Now, the ideal was to search the links inside a container where Ajax inserted them, otherwise the selector a[href^='http'] will search the whole page, and if there is any external link that was not inserted by Ajax, the setInterval will stop right at the beginning.

It should be something like this:

var as = $("#div a[href^='http']:not([href*='zaha.in'])");
            ↑↑↑↑
   especificar a div alvo do Ajax