Question

Hola, tengo este codigo que hace que se refresque una pagina de mi web dentro de un div:

$(function(){ 
            $(".comment").load("ajaxchatgr.php?id=<?=$id?>"); 
          });
          $(document).ready(function() {
           var refreshId = setInterval(function() {
            $(".comment").load('ajaxchatgr.php?id=<?=$id?>');
}, 10000);
          $.ajaxSetup({ cache: false });
          });

El codigo funciona bien pero dentro de esa pagina tengo links que quiero convertir a HTML y no hay manera que funcione porque al principio funciona pero al cabo de 10 segundos ya no funciona, aqui el codigo:

 var comentd = document.getElementsByClassName('contentlinkvideoimg');
          for(var i=0;i < comentd.length;i++) {
          var comenyd = comentd[i];
          var str = comenyd.innerHTML;
          var exp = /((https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])(?=([^"']*["'][^"']*["'])*[^"']*$)/ig;
          var exp2 = /((https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|]+\.(?:jpe?g|gif|png))(?=([^"']*["'][^"']*["'])*[^"']*$)/ig;
          var exp3 = /(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/ig;
          var images = str.replace(exp2, "<img src='$1' alt='$1' class='image-chat'>");
          var youtube = images.replace(exp3,"<div id='maxwidthyo'><div class='videoWrapper'><iframe frameborder='0' allowfullscreen src='http://www.youtube.com/embed/$1'></div></div>");
          var links = youtube.replace(exp,"<a href='$1' target='_blank'>$1</a>");
          comenyd.innerHTML = links
          }

Lo que hace es que los links que esten dentro de contenedores con la clase 'contentlinkvideoimg' se conviertan en HTML, pero como he dicho solo funciona los 10 primeros segundos.
He probado con poner el codigo en la pagina que se muestra dentro del div o poniendolo dentro de de la funcion de setinterval pero no lo consigo

Answer 1

Hola que tal, según entiendo la distribución de tu código tu for solo se ejecuta una sola vez, vuelve tu procedimiento una función y llamala con un callback para que los elementos ya existan cuando tu funcion los busque.

Para esto cambia tu load por un $.get :

$.get( "ajaxchatgr.php?id=<?=$id?>", function( data ) {
   $(".comment").html( data );
   funcionfor();
 });

Y vuelve una función tu codigo:

var funcionfor = function(){
    var comentd = document.getElementsByClassName('contentlinkvideoimg');
    .
    .
         comenyd.innerHTML = links
    }
 };// fin de funcionfor

Es importante saber cuando tus elementos ya estan disponibles para ser usados en el DOM, en local talvez te funcione los primeros 10 segundos pero en producción tu código no funcionaria ni siquiera la primera vez.

Saludos.