JQuery .html () управляет DOM?

Question

Я использую следующую функцию:

    $(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);
});

Однако не похоже, что jQuery изменяет DOM, поскольку я получаю тот же .length на моем селекторе ":input, select" до и после установки html-таблицы.

Это всего лишь тест, но мне любопытно, пытался ли кто-нибудь когда-либо пробовать это или имел какое-либо представление, почему длина будет такой же после установки .html таблицы.

Answer 1

$.get является асинхронным, во втором журнале отображается то же число, поскольку оно регистрируется до завершения ajax, попробуйте

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

или в вашем текущем наборе сценариев async:false (что крайне не рекомендуется)

$(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);
});

Answer 2

вы сначала сообщаете длину и только потом манипулируете dom;).Что сказали @Nemoy и @ 3nigma.

Answer 3

$.get асинхронный - он запускает свой запрос и код продолжает выполняться.В результате, console.log($(":input, select").length); выполняется до возврата $get.Добавьте console.log($(":input, select").length); к обратному вызову (после tbl.html(data)), и вы увидите лучшие результаты.

Answer 4

Попробуйте:

$.get('templates/' + tmpl + '.html', function (data) {
    tbl.html(data);
    console.log($(":input, select").length);
});

Вы делаете асинхронный запрос и печатаете количество элементов до того, как запрос ajax будет выполнен. Поэтому попробуйте распечатать счет внутри вашего обратного вызова, который выполняется асинхронно.