我如何检测 DOM 已准备好并设置了所有属性

Question

我有下一个html结构：

<div id="controls">    
    <div class="action" data-action="controller/action1" data-view="view1">...</div>
    <div class="action" data-action="controller/action1" data-view="view2">...</div>
    <div class="action" data-action="controller/action2" data-view="view1">...</div>
    <div class="action" data-action="controller/action2" data-view="view2">...</div>
     ...e.t.c.
</div>

在 typeScript 中，我尝试获取数据属性并构建 ajax 查询：

$('#controls').off('click').on('click','.action',(e) => {
       var $element = $(e.target),
            action = $element.data('action'),
            view = $element.data('view');

        if(!action)
            return this.sendNotification(false,'Setup action in config');
        if(!view)
            return this.sendNotification(false,'Setup view in config');

        // Ajax request and other logic 
});

我还有更新部分页面的功能（在主题开头包含 div 个块）

private updateActionsBlock() {
   $.get(location.href, (html) => {
       $('#controls').html($(html).find('#controls'));
            this.init();
   });
}

问题

如果用户遇到 Internet 连接问题或计算机速度慢（可能浏览器没有足够的 RAM）- 在使用 updateActionBlock() 几秒钟后无法从 $('.action') 获取数据属性。这些变得不确定。

问题

如何在 DOM 准备好之前禁止点击 $('.action');？

我希望可以不用setTimeout

Answer 1

问题不在 DOM。

$('#controls').off('click').on('click','.action',(e) => {
       var $element = $(e.target),
            action = $element.data('action'),
            view = $element.data('view');

        if(!action)
            return this.sendNotification(false,'Setup action in config');
        if(!view)
            return this.sendNotification(false,'Setup view in config');

        // Ajax request and other logic 
});

有时，当我点击 .action 时，我在 e.target 中输入了错误的元素。而不是 <div class='action'>...</div> 我获得了内部元素。

所以当我将 e.target 更改为 e.currentTarget 时，错误已修复。

我如何检测 DOM 已准备好并设置了所有属性

How can i detect DOM prepared and all attributes set

javascript

jquery

dom

typescript

jquery-events