2

Olá, tenho um blog no wordpress onde preciso que todos os links externos sejam abertos em uma nova guia ao clicar. Porém esses links são carregados pelo ajax e a função que tenho é executada antes do ajax terminar de carregar tudo.

$(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');
});
});

Então tentei através do javascript definir um intervalo de tempo para dar tempo deexecutar a função jquery após o ajax terminar, no entanto também não funciona:

  // 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);

Alguém saberia alguma maneira de realizar isso após o ajax carregar por completo? Detalhe que não posso editar os arquivos da requisição ajax por serem parte de um plugin do wordpress, então precisaria que isso ocorresse por fora.

0

2 Respostas 2

1

Você pode tentar adicionar o atributo target nos links:

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

Desse modo ele funcionara em todos os elementos dinâmicos que serão gerados pelo ajax apos o carregamento da página, porque está adicionado um evento no "body, document"

1
  • não funcionou, ainda assim após o ajax ser carregado ele não atribui o target Commented 23/12/2018 às 14:11
1

Ao meu ver não precisa atribuir eventos de click aos links <a>, basta apenas inserir o atributo target="_blank" que já irá abrir em uma nova guia.

Como você não sabe quanto tempo o Ajax irá levar para processar, uma forma é criar um setInterval que ficará rodando até encontrar um link externo definido no seu seletor. Assim que o if no setInterval for atendido, significa que o Ajax foi processado e os links foram inseridos, então basta adicionar o atributo target a todos os links de uma só vez, sem a necessidade de laço .each.

Veja como fica:

$(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);

});

O setInterval vai ficar rodando a cada segundo, e quando houver algum elemento na página que foi definido na variável as, irá aplicar o target a todos os elementos e parar o setInterval.

Agora, o ideal mesmo era buscar os links dentro de algum contêiner aonde o Ajax os inseriu, caso contrário o seletor a[href^='http'] irá buscar na página toda, e se houver algum link externo que não foi inserido pelo Ajax, o setInterval irá parar logo no início.

Deveria ser algo assim:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .