Как переписать ф-ю HistoryAPI без перезагрузки с jquery на js?

Question

Как переписать ф-ю HistoryAPI без перезагрузки с jquery на js?

allcash Оракул (72199), на голосовании 4 месяца назад

$('.historyAPI').off('click');
$('.historyAPI').on('click', function(e)
{ если я выношу все тело в функцию и делаю document.querySelector(".historyAPI").addEventListener('click', historyAPI); в этом случае страницы перезагружаются. Как переписать эти первые две строчки?

Answer 1

Ayzek Klark Знаток (315) 5 месяцев назад

это что за питон такой

allcashОракул (72199) 5 месяцев назад

уж

Ayzek Klark Знаток (315) Paho, ну как справился с ним?

Ayzek KlarkЗнаток (315) 5 месяцев назад

Удали обработчик события click:
document.querySelector('.historyAPI').removeEventListener('click', historyAPI);

Добавь новый обработчик события click:
document.querySelector('.historyAPI').addEventListener('click', function(e) {
// Ваш код обработки события здесь
});
Вместо использования $ для выбора элемента по классу, используй document.querySelector

удали предыдущий обработчик события click с помощью removeEventListener, указывая имя функции historyAPI.

И, наконец, добавь новый обработчик события click с помощью addEventListener, передавая анонимную функцию. Убедитесь, что ваш код обработки события находится внутри нового обработчика click.

Ayzek KlarkЗнаток (315) 5 месяцев назад

понял?

Answer 2

Для переписывания функции HistoryAPI с jQuery на чистый JavaScript без перезагрузки страницы можно использовать следующий код:

```javascript
document.querySelectorAll('.historyAPI').forEach(function(element) {
element.addEventListener('click', function(e) {
// Ваше тело функции здесь
});
});
```

Этот код найдет все элементы с классом "historyAPI" и добавит каждому из них слушателя события "click". При этом страница не будет перезагружаться при клике на элементы с этим классом.

Answer 3

Конечно, попробуем переписать это без использования jQuery, используя чистый JavaScript:

1. Убираем существующие обработчики событий.
2. Добавляем новые обработчики событий с использованием `addEventListener`.

Вот как это может выглядеть:

```javascript
// Получаем все элементы с классом 'historyAPI'
var historyAPIElements = document.querySelectorAll('.historyAPI');

// Удаляем существующие обработчики событий
historyAPIElements.forEach(function(element) {
var newElement = element.cloneNode(true);
element.parentNode.replaceChild(newElement, element);
});

// Добавляем новые обработчики событий
historyAPIElements = document.querySelectorAll('.historyAPI');
historyAPIElements.forEach(function(element) {
element.addEventListener('click', function(e) {
// Ваше тело функции здесь
});
});
```

Если у тебя уже есть функция `historyAPI`, используй её вместо анонимной функции:

```javascript
// Получаем все элементы с классом 'historyAPI'
var historyAPIElements = document.querySelectorAll('.historyAPI');

// Удаляем существующие обработчики событий
historyAPIElements.forEach(function(element) {
var newElement = element.cloneNode(true);
element.parentNode.replaceChild(newElement, element);
});

// Добавляем новые обработчики событий
historyAPIElements = document.querySelectorAll('.historyAPI');
historyAPIElements.forEach(function(element) {
element.addEventListener('click', historyAPI);
});
```

Таким образом, мы создаём клоны элементов, удаляя при этом все существующие обработчики событий, и затем снова добавляем новые обработчики событий. Это должно помочь избежать перезагрузки страниц.

Answer 4

Петр Алексеевич Оракул (82071) 5 месяцев назад

Весь сайт собрался с помощью ответов написать? Про GPT не в курсе?

allcashОракул (72199) 5 месяцев назад

всё уже, переписал. Некоторые сложные функции на jquery что не гуглились