JQuery .each() on dynamically created data from pageload

Question

I have rows generated in a table dynamically. I am getting the data for the dynamic rows by ajax calls. This loading of dynamic rows is happening at the time of page load. I am not able to access this dynamic data using Jquery. To be specific, I need to iterate through all the rows in the table.Is there a good way to accomplish this?

Also There is no event like button click to load the data. The data is loaded at the time of page loading.

 $.ajax({
            type: "POST",
            url: serviceUrl,
            contentType: "application/json",
            data: ko.toJSON(getevent),
            dataType: "json",
            success: function (data) {                                     
               $(".childrenrow").each(function(){ //.childrenrow are the dynamically generate table rows
               alert("Here");     //This part is not getting exeucuted
//I am planning to check for the the existence of data.children in each .childrenrow once the loop is entered
             });

            },
            error: function () {

            }
        });

Are you using `.load` that you don't have access to the result before it is inserted into the DOM? If you use `.ajax` you should be able to access the HTML inside of the `success` handler. — ryachza, Aug 20 '15 at 17:57
depending on which version of jquery you are using . this might help you http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Farhan, Aug 20 '15 at 18:01
Here is the issue: I am making ajax calls at the time of page load to create dynamic data into tables. Now I am making another call which return some specific details about the table like which rows in table have a specific property etc.. Now I need to access the table rows with those specific properties from second call. I am not using .load — Saisujithreddy, Aug 20 '15 at 18:06
I voted to close this question because you have not shown any code that you have tried in your question. — bhspencer, Aug 20 '15 at 18:10
Thanks farhan. I am using the latest version which allows .on(). But these things work on triggering an event like on "click". But I am not triggering any events here. — Saisujithreddy, Aug 20 '15 at 18:10
@Saisujithreddy You said you aren't using `.load`, so how is the HTML returned from the server getting *into* the table element? You should have the ability to process the HTML before, or immediately after within the same context. — ryachza, Aug 20 '15 at 18:12
I am using Knockout to generate the table content. I am getting the table data from the first call and storing it in ObservableArray to generate the dynamic data. — Saisujithreddy, Aug 20 '15 at 18:18
@Saisujithreddy Okay so this is definitely a question within the context of Knockout not jQuery. I would expect Knockout to have some method of being alerted to/binding to a UI refresh in which you would then do your work. Looking briefly there seems to be some concept of "observables" and "subscribers", but I am not familiar with Knockout in the least. — ryachza, Aug 20 '15 at 18:21
check if there is duplication of IDs, can you show how you are using each() — Farhan, Aug 20 '15 at 18:23
check this http://stackoverflow.com/questions/2862172/jquery-iterating-through-newly-created-elements — Farhan, Aug 20 '15 at 18:25
I have seen that post already @farhan. But the table data there is not loading at run time. we are manually appending the rows. So Jquery knows about this addition. But in my case, the table is generated by making an ajax call once the document is ready. That is the problem here-Jquery doesnot know about this change — Saisujithreddy, Aug 20 '15 at 18:27
@Saisujithreddy Referencing your code - assuming `data` is the HTML containing these `.childrenrow`'s, `$('.childrenrow')` will not find them since they're not yet in the DOM. You would need to append the HTML to the DOM and then query them, or do something like `$(data).find('.childrenrow').each()`. — ryachza, Aug 20 '15 at 18:28
There is no duplication of ids too. I am using each() as posted in the code above — Saisujithreddy, Aug 20 '15 at 18:28
@Saisujithreddy However you do it, you need to somehow bind your `.each` to execute *after* (preferably *when*) the DOM is updated with the content. Without knowing how the table is being populated I can't make any recommendations, but that's what you need to figure out how to do. — ryachza, Aug 20 '15 at 18:30
@ZJM you are absolutely right. That was the problem!!! I was trying to query the table before the table is dynamically generated or the DOM is updated. Thanks for your suggestion :) — Saisujithreddy, Aug 20 '15 at 19:23

score 0 · Answer 1 · answered Aug 20 '15 at 18:41

Try this,

As you said your data will be loaded while page load then you can access those data from following code:

$(document).ready(function(){
  $("table tr td").each(function(){
     alert($(this).text());  
  });
});

This will iterate through each td of each tr and .text() will return the data inside respective td. You can also use $("table tr").each(function(){ , which will get the data from each tr.

Working js code

JQuery .each() on dynamically created data from pageload

1 Answers1