Обновление Javascript прослушивателей событий после AJAX добавления новых элементов - PullRequest
Новая
       2

Обновление Javascript прослушивателей событий после AJAX добавления новых элементов

0 голосов
/ 22 апреля 2020

У меня есть поиск по форумам здесь, но все еще не могу найти правильный ответ. Я вижу решения с jQuery, с которыми я не знаком. Я ищу ванильное JavaScript решение, пожалуйста. Короче говоря, я создаю элементы динамически с Ajax, и мне нужно добавить к ним прослушиватели событий после их создания. js здесь предлагает варианты, когда пользователь начинает вводить в поля ввода. Код работает нормально, если на входе stati c, но не с Dynami c. Я знаю, что DOM создается при нагрузке, и эти элементы еще не существуют во время загрузки.

Главная страница: 

<head>

  <script src="../js/autocomplete-type.js"></script>

   <script>
     window.addEventListener("load", function(){
       suggest.attach({
         target : "NCustType",
         url : "../private/searchdbtype.php",
         data : { type: "CustType" }
       });
     })
  </script>
</head>

тип автозаполнения. js довольно длинный, поэтому не уверен, стоит ли публиковать это здесь.

тело при загрузке: 

<table id='CustDetails'></table>

Ajax заполняет эту таблицу следующим внутренним значением HTML (публикуя здесь только один элемент): 

<tr>
  <td>Customer Type</td>
  <td><input type='text' id='NCustType'></td>
</tr>

Поэтому мне нужно добавить прослушиватель событий с функцией «предложить» с вложениями {} в поле ввода с id = 'NCustType'. Я буду признателен за помощь с JavaScript предложениями! Я не профессионал в области кодирования, но эта проблема сводит меня с ума. И я хотел бы избежать jQuery, пожалуйста.

Эта часть кода (в типе automcomplete. js) добавляет прослушиватель:

suggest.instance[opt.target].input.addEventListener("keyup", function (evt) { // Clear old timer if (suggest.instance[opt.target].timer != null) { window.clearTimeout(suggest.instance[opt.target].timer); } Однако файл generi c и используется для различных полей

Итак, как мне вызвать функцию js file AND в 'head' (с параметрами) после срабатывания Ajax?

Ответы [ 2 ]

0 голосов
/ 22 апреля 2020

Если я правильно понимаю проблему, элементы html не существуют до выполнения запроса ajax, что означает, что впоследствии вы можете выполнять только привязки событий. Поэтому после выполнения вызова ajax вам нужно выполнить итерацию каждого результата и создать прослушиватель для каждого создаваемого вами идентификатора. 

fetch('my/api').then(r => {
   r.map(item => {
    document.querySelector(`#${item.id}-input`).addEventListener('keyup', yourfunction);
   })
})
0 голосов
/ 22 апреля 2020

Если вы хотите добавить прослушиватель событий к элементам, которые еще не существуют, есть хитрость: вы присоединяете прослушиватель событий к document, а затем полагаетесь на «всплывающее» событие вверх от элемента через дерево DOM.

В коде, который будет выглядеть как 

// Attach event listener to the document
document.addEventListener('change', (event) => {
    // Make sure, that you're receiving event from a correct element
    if (event.target.id === 'NCustType') {
        // Do what you want to do here
    }
});

Надеюсь, это поможет!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...