Почему ссылка, добавленная с помощью JavaScript, активируется только после второго клика?

Question

Арно

html , javascript

Почему ссылка, добавленная с помощью JavaScript, активируется только после второго клика?

Всем привет! <br/> <br/> У меня есть следующий фрагмент JavaScript, который добавляет ссылки в определенный div: <br/> <pre><code class="javascript">_result.forEach(function(elem) {
          let _link = elem.href;
          let _text = elem.innerHTML;
        
          let _searchLink = '&lt;a href="'+elem.href+'" class="btn btn-success btn-sm rounded-5 opacity-75 city m-1" &gt;'+elem.innerHTML+'&lt;/a&gt;';          
          _city_search_result.innerHTML += _searchLink;
        });</code></pre> <br/> <br/> Добавление ссылок осуществляется корректно. Однако при первом клике по добавленным ссылкам переход на новую страницу не происходит, зато со второго клика всё работает как следует. <br/> <br/> Подскажите, пожалуйста, в чем может быть причина этой проблемы?

25 сентября 2024 г. 11:43

Ответы на вопрос 2

Похожие вопросы

Answer 1

Причина, по которой ссылки, добавленные с помощью JavaScript, не срабатывают с первого клика, может быть связана с тем, как вы добавляете HTML-содержимое в ваш элемент. Давайте рассмотрим несколько возможных причин и способов их устранения:

1. **Использование `innerHTML`:** При использовании `innerHTML` для добавления новых элементов в DOM, браузер может не распознать события клика для вновь добавленных элементов сразу. Это может происходить из-за того, что обработчики событий не связаны с элементами, добавленными динамически.

   **Решение:** Вместо использования `innerHTML` для добавления новых элементов, создавайте элементы программно с помощью `document.createElement` и добавляйте их в DOM с помощью `appendChild` или других методов.

```javascript
_result.forEach(function(elem) {
    let _link = document.createElement('a');
    _link.href = elem.href;
    _link.className = 'btn btn-success btn-sm rounded-5 opacity-75 city m-1';
    _link.innerHTML = elem.innerHTML;

    _city_search_result.appendChild(_link);
});
```

2. **Обработчики событий:** Убедитесь, что у вас нет конфликтов с обработчиками событий. Если вы добавляете обработчики событий к динамически созданным элементам, они могут не сработать при первом клике.

   **Решение:** Добавьте обработчики событий на родительский элемент (делегирование событий). Например:

```javascript
_city_search_result.addEventListener('click', function(event) {
    if (event.target.tagName === 'A') {
        window.location.href = event.target.href;
    }
});
```

3. **Проблемы с обновлением DOM:** Если другие JavaScript-коды или стили влияют на ваше поведение кнопок, это может также привести к такому эффекту. Например, если у вас есть CSS или JavaScript, который управляет состоянием элементов, это может вызвать задержку.

Убедитесь, что проверили все возможные конфликты.

4. **Замена HTML-кода:** Если в `_city_search_result.innerHTML` добавляют старое содержимое, это может также повлиять на ваше поведение. Каждый раз, когда вы вызываете `innerHTML`, вы полностью перезаписываете все содержимое, что может удалять ранее добавленные обработчики событий.

   Используйте подход добавления элементов, а не перезаписи всего содержимого.

Попробуйте применить указанные выше советы, и это должно помочь решить проблему с кликами по динамически добавленным ссылкам.

Answer 2

Проблема в эвенте change, при первом клике сбрасывается фокус с элемента и срабатывает событие change, которое переделывает div с ссылками. Я бы поменял 
 _city_search_name.addEventListener('change', searchCity);
_city_search_name.addEventListener('keyup', searchCity);
 
 на 
 _city_search_name.addEventListener('input', searchCity);