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>

ISSUE：

loadTemplate 方法成功加载了一个模板（ remote-template2.htm ）并附加到正文。
成功加载模板后，传递回调函数 showProduct 方法被触发。
在 showProduct 方法内部我试图使用加载的模板（ $（'＃prodBasicView'））但它返回空数组。
但如果我延迟执行 showProduct 只需几毫秒即可，但我认为这不是一个好习惯
以上几点似乎是追加DOM元素尚未准备就绪
如何确保修改/操作的DOM在使用之前已经准备好了吗？

Answer 1

在我看来，您只需要将回调调用代码放在$.get回调中，如下所示：

function loadTemplate(path, callback) {
    $.get(path, null, function (t) {
        $('body').append(t);
        if (callback != undefined && typeof (callback) == 'function') {
            callback.apply(window);
        }
    }, 'text');
}

Answer 2

在ajax回调处理程序中执行callback。（因为ajax 异步）

   function loadTemplate(path, callback) {
        $.get(path, null, function (t) {
            $('body').append(t);
            if (callback != undefined && typeof (callback) == 'function') {
               callback.apply(window);
            }
        }, 'text');
    }

修改DOM之后如何确保DOM再次就绪

2 个答案: