Обновить страницу по клику?

Question

[Grizar]

я ИМЕЮ кнопку которая по клику обновляет страницу.
Вчера она работала а сегодня чета не хочет.
что не так ?

document.querySelectorAll('.woosb-products').forEach(n => {
  n.insertAdjacentHTML('afterend','<button id="b_epr" >обновить</button>');
});
$('#b_epr').click(function() { location.reload(true);
});

Перестает работать при добавлении к кнопке стилей

#b_epr {
    position: fixed;
    bottom: 56px;
    right: 0;
    MARGIN-RIGHT: 1PX;
    z-index: 2020;
    border-radius: 0;
    background: #f49f36;
    color: white;
    padding: 10px 20px;
    outline-color: #ffffff !IMPORTANT;
    TEXT-SHADOW: -1px 0PX #565353, 0 1px #585050, 1px 0 #6b6262, 0 -1px #635555;
}

Как исправить

Comments

[Simkav]

Что изменилось за это время?

[Grizar]

Simkav, да ничего..невижу, кнопка выводится, но обновление не происходит

[Grizar]

Simkav, добавил в вопрос правку

Answer 1

[Сергей Соколов]

повилось больше 1 продукта, и всё, крах: id ведь на странице должен быть уникальным, а у вас их может быть и больше 1.

Замените id на класс.

Что-то типа

const btnClassName = "btn_refresh";

document.querySelectorAll('.woosb-products').forEach(n => {
  n.insertAdjacentHTML('afterend', `<button class="${btnClassName}">обновить</button>`);
});

document.addEventListener('click', (event) => {
  if (event.target.classList.contains(btnClassName)) {
    window.location.reload();
  }
});

Upd. Так как выяснилось, что кнопка должна быть только одна, лучше только одну и создавать:

const product = document.querySelector('.woosb-products');
if (product) {
  const button = document.createElement('button');
  button.id = 'b_epr';
  button.innerText = 'обновить';
  button.addEventListener('click', () => window.location.reload());
  product.insertAdjacentElement('afterend', button);
}

Comments

[Grizar]

???
я поправил вопрос, айди непричем

[Grizar]

щас попробую, НО кнопка работает если в ее стиле нет position: fixed;, как тока это добавляю обновление перестает работать

[Сергей Соколов]

Grizar, меня смущает использование .forEach() — если товаров с классом .woosb-products на странице несколько, отрисуется несколько кнопок, Но т.к. у них position: fixed, они нарисуются одна над другой и будут выглядеть как одна.
При этом слушателя клика получит самая первая, самая «нижняя» из них, а кликать будете по «верхней».

[Сергей Соколов]

Grizar, может, там ещё что-то прозрачное рисуется поверх кнопки, что перехватывает клик? - посмотрите инспектором браузера

[Grizar]

Сергей Соколов, да, рисует сверху... щас удали

[Grizar]

Сергей Соколов, Можно еще в догонку вопросик, а какой скрипт считаете лучше всетаки использовать, ваш вариант, или мой ?
p/s/ добавил для ненужных кнопок дисплей-нон

[Сергей Соколов]

Grizar, оба так-себе ) Обновил ответ.

Answer 2

[Александр Мыльченко]

$('#b_epr').click( function() {

/* 
в контексте функции указатель на location доступен? 
Или undefied? 
*/ 

location.reload( true ) ;  // Boolean( location ) - ???

/* используйте */
window.location.reload(true);

});