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和所有属性集

1 个答案: