Почему добавленная через JS ссылка срабатывает только на второй клик?

Question

[ImMrDimm]

Всем привет!

Есть вот такой JS, который добавляет ссылки в определённый div

_result.forEach(function(elem) {
          let _link = elem.href;
          let _text = elem.innerHTML;
        
          let _searchLink = '<a href="'+elem.href+'" class="btn btn-success btn-sm rounded-5 opacity-75 city m-1" >'+elem.innerHTML+'</a>';          
          _city_search_result.innerHTML += _searchLink;
        });

Добавление работает как надо.
Но, добавленные таким образом ссылки при первом клике не инициируют переход на новую страницу. На второй клик - проблем нет, переход происходит.

Прошу подсказать, что за нюанс тут спрятан

UPD: закинул весь код в песочницу

Comments

[Алексей Уколов]

Может, у вас что-то клики перехватывает? Или ссылки подменяются не сразу?
В этом коде проблем я не вижу, попробуйте сделать интерактивный пример в песочнице.

[Владимир Римидалв]

Отукуда берется _city_search_result?
Каким образом формируется _result?

Как отрабатывает если упростить код (для теста) до чего-то вроде:

let _searchLink = '<a href="https://google.com" class="btn btn-success btn-sm rounded-5 opacity-75 city m-1" >test</a>';          
document.getElementById("div1").innerHTML += _searchLink;

[ImMrDimm]

Владимир Римидалв,

_result это массив от document.querySelectorAll(***);
_city_search_result это нода от document.getElementById(***);

Как отрабатывает если упростить код (для теста) до чего-то вроде:

Работает также, с проблемой

[Алексей Уколов]

Пока не покажете код в песочнице, вам никто помочь не сможет.

Работает также, с проблемой

Значит, проблема в каком-то другом коде (он может быть ваш, может быть из браузерного расширения, может быть вообще CSS виновато).

[Paul14]

Попробуйте insertAdjacentHTML. Функция вставляет полученные узлы (nodes) в DOM дерево в указанную позицию. Данная функция не переписывает имеющиеся элементы, что предотвращает дополнительную сериализацию.

_result.forEach(function(elem) {
    let _searchLink = '<a href="'+elem.href+'" class="btn btn-success btn-sm rounded-5 opacity-75 city m-1">'+elem.innerHTML+'</a>';          
    _city_search_result.insertAdjacentHTML('beforeend', _searchLink);
});

[ImMrDimm]

Господа, всем спасибо за ответы.
Пока вопрос не решён, но я сделал демо в песочнице, вопрос обновил.

Answer 1

[Владимир Римидалв]

Проблема в эвенте change, при первом клике сбрасывается фокус с элемента и срабатывает событие change, которое переделывает div с ссылками. Я бы поменял

_city_search_name.addEventListener('change', searchCity);
_city_search_name.addEventListener('keyup', searchCity);

на

_city_search_name.addEventListener('input', searchCity);

Comments

[ImMrDimm]

Спасибо большое!

Вы абсолютно правы, я даже про такое и не подумал. Век живи - век учись!