Get dynamically loaded element attribute without event click

Question

Get dynamically loaded element attribute without event click

Navigation

#1 by (0 votes)

0

While loading the page I get DB data and create a list as below.

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

After loading the data and creating the list, I need to get the attribute data-process-id, no click event, and do constant update, but I do not get any attribute.

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

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

    ...
}

How to get this attribute created automatically and without delegating to event like click?

jquery

asked by anonymous 15.05.2018 / 14:38

1 answer

Google maps does not work within bootstrap modal Problem with EntityFramework - An entity object can not be referenced by multiple instances of IEntityChangeTracker

score 0 · Answer 1

My first suggestion would be to use class in those elements that you want to get instead of id. In most of my projects when I have a dynamic list and need to perform some action on them we use specific classes in the elements.

So I understand after loading the html page you want to get the separate attribute of each dynamically generated element to perform some task, in the attached example I put only one console.log to show the value of the attribute.

I'll give you an example using a check-box sequence that would be generated.

$( 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><!DOCTYPEhtml><html><body><ol><li><ahref="#" 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>