Добавить прослушиватель событий в динамический контейнер

У меня возникли проблемы с добавлением прослушивателя событий кликов к элементам, которые еще не присутствуют на странице. Просто обратите внимание, что я выполняю следующий код в среде Equity для JQuery, чтобы документ был готов, поэтому он выполняется после загрузки DOM. Таким образом, у меня есть DIV, который я использую в качестве типа кнопкиДобавить прослушиватель событий в динамический контейнер

<div id="openContainer"> ... </div>

Теперь, когда этот DIV щелкает, другой DIV динамически добавляется к странице. Этот div добавляется только тогда, когда происходит событие с щелчком мыши. Добавленный div содержит кнопку с поиском идентификатора . Я пытаюсь добавить к этому прослушиватель событий. До сих пор я это

document.getElementById('openContainer').addEventListener('click', function() { 
    document.getElementById('search').addEventListener('click', function() { 
     alert("ADDED") 
    }); 
});

Однако, когда я запускаю это я получаю сообщение об ошибке, что document.getElementById (...) является нулевым. Я думаю, что причина этого в том, что слушатель событий добавляется до добавления фактического динамического div. На самом деле, я знаю, что это так, потому что он работает с тайм-аутом, например.

document.getElementById('openContainer').addEventListener('click', function() { 
    setTimeout(function() { 
     document.getElementById('search').addEventListener('click', function() { 
      alert("ADDED") 
     }); 
    }, 2000); 
});

Есть ли способ, которым я могу это сделать без тайм-аута?

Благодаря

источник

2017-02-14 kate_hudson

Вы можете разместить один обработчика событий на существующем элементе, и в анонимной функции addEventListener(), проверьте идентификатор элемента, на котором было запущено событие:

document.getElementById('openContainer').addEventListener('click', function(event){ 
    var clicked = event.target; 
    if (clicked.id === 'openContainer') { 
    // the '#openContainer' element was clicked, 
    // ...do stuff 
    } else if (clicked.id === 'search') { 
    // the '#search' element was clicked, 
    // ...do stuff 
    } 
});

источник

2017-02-14 13:43:55

Единственная проблема с этим в том, что он все еще показывает ошибку, потому что элемент поиска еще не указан –

Можете ли вы показать достаточно своего кода, чтобы мы могли воспроизвести вашу проблему? Приведенный подход не должен генерировать никаких ошибок, так как если элемент с идентификатором '' search ''не существует, он не будет входить в ветвь' else if', которая этого требует. –

Одна из возможных причин заключается в том, что ваш JavaScript работает до того, как элемент DOM будет создан даже.

Убедитесь, что ваши теги сценариев находятся после тегов.

источник

2017-02-14 13:46:53 DeeJay

Добавить прослушиватель событий в динамический контейнер

ответ

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