jQuery .html（）はDOMを操作しますか？

Question

私は次の関数を実行している：私は前に私のテーブルのHTMLを設定した後、私の":input, select"セレクタに同じ.lengthを取得していますので、jQueryのDOMを変更しているかのように

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

しかし、それは表示されません。 。

これは単なるテストですが、これを試したことがある人や、テーブルの.htmlを設定した後の長さが同じである理由が分かっていれば、私は不思議です。

Answer 1

$.getが非同期である、AJAXが完了する前に、それが記録されるため、2番目のログは同じ番号を示し、

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

試してみてください。

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

ajaxリクエストが完了する前に非同期リクエストを作成し、要素数を出力しています。だからあなたのコールバックの中で非同期に実行されるカウントをプリントしてみてください。

Answer 3

$.getは、アシンクロナスであり、要求を発し、コードは引き続き実行されます。その結果、$getが返される前にconsole.log($(":input, select").length);が実行されます。コールバック（tbl.html(data)の後）にconsole.log($(":input, select").length);を追加すると、より良い結果が得られます。

Answer 4

最初に長さを報告してからdomを操作するだけです）。 @Nemoyと@ 3nigmaは何を言った。