Как я могу обнаружить DOM подготовлен и все атрибуты набор

У меня есть следующий HTML структура:Как я могу обнаружить DOM подготовлен и все атрибуты набор

<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>

В машинописном я пытаюсь получить данные-атрибуты и построить 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(); 
    }); 
}

PR OBLEM

Если пользователь имеет проблемы с подключением к Интернету или медленный компьютер (возможно браузер не достаточно RAM) - после использования updateActionBlock() несколько вторых невозможно получить данные атрибуты из $('.action'). Они становятся неопределенными.

Вопрос

Как я могу отключить, нажав на $('.action'); прежде, чем DOM готов?

Я надеюсь, что можно обойтись без setTimeout

источник

2016-12-12 Boris P.

Либо запускайте 'updateActionsBlock()' после того, как document.ready уволил, либо спрячет элементы и затушевывает их на document.ready. Я не вижу, как это на самом деле является вашей проблемой, поскольку делегированное событие должно быть привязано * long * до того, как запрос AJAX завершен –

К сожалению, мне нужно использовать 'updateActionBlock' после каждого запроса ajax, обрабатываемого нажатием' .action'. 'document.ready',' document.DOMContentLoaded' работает только при инициализации страницы –

Хорошо, но я хочу сказать, что делегированный обработчик событий уже связан, поэтому нет возможности, чтобы элемент можно было щелкнуть без запуска события. –

Проблема была не в 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 ошибка была исправлена.

источник

2017-01-17 21:32:17

Как я могу обнаружить DOM подготовлен и все атрибуты набор

ответ

Смежные вопросы