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

After modifying DOM how to make sure that DOM is ready again

本文关键字：DOM 准备就绪 确保 何确保 修改      更新时间：2023-09-26

让我们先做代码： 

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

远程模板2.htm ：-

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

问题：

  • loadTemplate 方法成功加载模板（远程模板 2.htm）并追加到正文。
  • 成功加载模板后，传递的回调函数 showProduct 方法被触发。
  • 在 showProduct 方法中，我正在尝试使用加载的模板 （$（'#prodBasicView'）），但它返回空数组。
  • 但是如果我将 showProduct 的执行延迟几毫秒，它可以工作，但我认为这不是一个好的做法

  • 以上一点似乎附加了DOM元素还没有准备好

  • 在使用它们之前，如何确保修改/操作的 DOM 再次准备就绪？

在我看来

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

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

在 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');
    }
相关文章：