javascript - DOM を変更した後、DOM が再び準備ができていることを確認する方法

Question

最初にコードを実行しましょう:

$(function(){

   //Step-2) Load and a template from server and APPEND to BODY  
   function loadTemplate(path, callback) {
        $.get(path, null, function (t) {
            $('body').append(t);
        }, 'text');

        if (callback != undefined && typeof (callback) == 'function') {
            callback.apply(window);
        }
    }

    //Step-3) a callback method
    function showProduct() {
        //setTimeout(function () {
        //    $('#prodBasicView').tmpl(prod).appendTo('#prodView');
        //}, 100);

        alert($('#prodBasicView').length); // it alerts 0, But I am expecting 1

    }

    //Step-1) initiating loading template
    loadTemplate('/template/remote-template2.htm', showProduct);
});

remote-template2.htm :-

     <div id="prodBasicView" style="display:none;">
       <div class="myProd">
        <h3> Product Name</h3>
           <span>Price: $ 700 </span>
       </div>
     </div>

問題：

• loadTemplateメソッドは、テンプレート ( remote-template2.htm ) を正常にロードし、本文に追加しました。
• テンプレートが正常にロードされた後、渡されたコールバック関数showProductメソッドが起動されます。
• showProductメソッド内で、読み込まれたテンプレート ( $('#prodBasicView') ) を使用しようとしていますが、空の配列が返されます。
• しかし、showProductの実行を数ミリ秒遅らせるとうまくいきますが、良い習慣ではないと思います

• 上記の点は追加されているようですDOM要素は準備ができていません

• それらを使用する前に、変更/操作されたDOMが再び準備ができていることを確認する方法??