1

Durante o carregamento da página eu pego dados do BD e crio uma lista conforme abaixo.

function chatContactList()  {
    $.post('src/inc/chat/', { DataProcess:'chatContactListShow' }, function(data){
        switch(data.status) {
            case 'error':
                sNoty(data.message, null, 'error', null);   
                break;
            case 'noHasList':
                return false;
                break;
            case 'hasList': 
                var content = ''
                $.each(data.chatOBJ, function(index, value){
                    content += '<li>';
                    content += '    <a href="#" data-process-id="'+value.pr_id+'" id="chatByContact" class="chatByContact">'+value.userName+'<i class="fa fa-comments"></i></a>';                   
                    content += '</li>';
                });
                $("#ulSidebarMenuContact").html(content);   
                break;
            case 'logOut': 
            case 'reload':  
                window.location.reload();
                break;      
        }           
    }, 'json');         
};

Após a carga dos dados e criar a lista, eu preciso pegar o atributo data-process-id, sem evento click, e fazer constante atualização, mas não pego nenhum atributo.

function updateMessageNotRead()
{   
    var prIdArray = new Array();

    $('a[id="chatByContact"]').each(function()  { 
        prIdArray.push($(this).attr('data-process-id'));
    }); 

    ...
}

Como pegar este atributo criado automaticamente e sem delegar em evento como o click?

8
  • essa função tem que ser executada dentro da função de retorno que cria a lista
    – Wees Smith
    Commented 15/05/2018 às 12:43
  • Problema é que preciso atualizar periodicamente, se existe mensagem referente a este contato usando a informação da li
    – RRV
    Commented 15/05/2018 às 12:50
  • e como vc pretende fazer essa atualização periodica? setInterval?
    – Wees Smith
    Commented 15/05/2018 às 13:03
  • Definir com setinterval
    – RRV
    Commented 15/05/2018 às 16:35
  • 1
    Wees, Acabei de chamar a função para verificar a mensagem, e defini o setinterval, e funcionou com sucesso.
    – RRV
    Commented 16/05/2018 às 1:03

1 Resposta 1

1

Minha primeira sugestão seria utilizar classe nesses elementos que deseja pegar ao invés de id. Na maioria do meus projetos quando tenho uma lista dinâmica e necessito realizar alguma ação nos mesmos utilizamos classe especificas no elementos.

Pelo que entendi após carregar a pagina html você deseja pegar o atributo separado de cada elemento gerado dinamicamente para realizar alguma tarefa, no exemplo anexado coloquei apenas um console.log para mostrar o valor do atributo.

Vou te dar um exemplo utilizando uma sequencia de check-box que seria gerados.

$( document ).ready(function() {
    getElements();
});
function getElements() {
    var prIdArray = new Array();
  $( ".elementoData" ).each(function() {
    var DataValue = $(this).attr("data-process-id");
    prIdArray.push(DataValue);
  });
  console.log("Array criado : ");
  console.log(prIdArray);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
   <body>
      <ol>
         <li>
            <a href="#" class="elementoData" data-process-id="01" id="chatByContact" class="chatByContact">Igor 1<i class="fa fa-comments"></i></a>';
         </li>
         <li> <a href="#" class="elementoData" data-process-id="97" id="chatByContact" class="chatByContact">Igor<i class="fa fa-comments"></i></a>';</li>
         <li> <a class="elementoData" href="#" data-process-id="98" id="chatByContact" class="chatByContact">Pedro<i class="fa fa-comments"></i></a>';</li>
         <li><a class="elementoData" href="#" data-process-id="99" id="chatByContact" class="chatByContact">henrique<i class="fa fa-comments"></i></a>';</li>
      </ol>
   </body>
</html>

5
  • Por desencargo eu coloquei uma classe e mudei a função, mas continua não pegando os atributos. Crie o li com estático e a função updateMessageNotRead retorna os atributos. Quando usamos um evento, fica fácil delegar com algo do tipo '$('.div-content').on('click', '.elementoData', function(event) { '.. Estou procurando para ver se existe um modo de delegar sem evento.
    – RRV
    Commented 15/05/2018 às 16:51
  • Poderia postar por favor um exemplo do seu html ? Commented 15/05/2018 às 17:34
  • Eu editei a pergunta e inserir o JQuery onde insiro o li na ul que já existia no DOM
    – RRV
    Commented 15/05/2018 às 18:30
  • Editei meu exemplo de código para considerar o elementos <a> e <li> conforme seu código gera. Consegui obter os atributos do mesmo jeito.Quando seu documento terminar de ser gerado você chama a função para dar get nesse atributos Commented 15/05/2018 às 19:58
  • Igor.. Acabei de chamar a função para verificar a mensagem, e defini o setinterval, e funcionou com sucesso.
    – RRV
    Commented 16/05/2018 às 1:03

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 .