How do I assign target="_ blank" to all external links after ajax finishes loading?

Question

How do I assign target="_ blank" to all external links after ajax finishes loading?

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

Hello, I have a blog in wordpress 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 done 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 using javascript to set a time interval to give the jquery function time to run after the ajax finishes, however it 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 of any way to accomplish this after ajax loads completely? Detail that I can not edit the ajax request files because they are part of a wordpress plugin, so I would need this to happen on the outside.

javascript jquery ajax wordpress

asked by anonymous 23.12.2018 / 14:22

2 answers

Display image after user logged in with CORDOVA Admob in the project [closed]

score 0 · Answer 1

You can try to add the target attribute to the links:

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

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

score 0 · Answer 2

In my view, you do not need to assign click events to <a> links, just insert the target="_blank" attribute that will already open in a new tab.

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

Here's how:

$(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 any element on the page that has been defined in the as variable, it will apply target to all elements and stop setInterval.

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

It should look something like this:

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