Question

I am running the following function:

    $(function () {
    var tbl = $('table[id^="stg_"]');
    var tmpl = tbl.attr('id').replace('stg_', '');

    // how many elements before
    console.log($(":input, select").length);

    $.get('templates/' + tmpl + '.html', function (data) {
        tbl.html(data);
    });

    // same number after ?
    console.log($(":input, select").length);
});

However, it doesn’t appear as if jQuery is modifying the DOM since I am getting the same .length on my ":input, select" selector before and after setting the html of my table.

This is just a test, but I am curious if anyone has ever tried this or has any idea why the length would be the same after setting the .html of the table.

Answer 1

$.get is asynchronous, the second log shows the same number because it is logged before the ajax is completed, try

console.log($(":input, select").length);
$.get('templates/' + tmpl + '.html', function (data) {
    tbl.html(data);
    console.log($(":input, select").length);//probably it will give a different number
});

or in your current scenario set async:false (which is highly not recommended)

$(function () {
    $.ajaxSetup({
       async:false
    });
    var tbl = $('table[id^="stg_"]');
    var tmpl = tbl.attr('id').replace('stg_', '');

    // how many elements before
    console.log($(":input, select").length);

    $.get('templates/' + tmpl + '.html', function (data) {
        tbl.html(data);
    });   

    console.log($(":input, select").length);
});