Проблема, с которой вы столкнулись, вероятно связана с тем, что ваш JavaScript код пытается получить доступ к элементам, которых нет на странице. Чтобы исправить это и убедиться, что код продолжает работать даже если некоторых элементов нет, вы можете воспользоваться следующими подходами:
1. **Проверка наличия элемента**: Убедитесь, что вы проверяете, существует ли элемент прежде чем к нему обращаться. Это можно сделать с помощью условной проверки.
2. **Делегирование событий**: Вы уже используете делегирование событий с помощью `$(document).on(...)`, что позволяет избежать необходимости в навешивании обработчиков на элементы, которые могут отсутствовать. Это правильно, поскольку вы хотите, чтобы обработчик был активен для будущих добавленных элементов.
3. **Простой обработчик**: Измените обработчик так, чтобы он работал корректно, даже если некоторые элементы отсутствуют.
Вот один из способов доработать ваш код:
```javascript
$(document).on('click', '.information__link, .rent__block-contacts__link, .rent__block-down--link, .footer__link, .lib__link, .contacts__block-address--item-link, .rent-contacts__link', function (e) {
// Убедиться, что контекст вызова (this) не равен null
if (!$(this).length) return;
let posX = $(this).offset().left,
posY = $(this).offset().top,
buttonWidth = $(this).outerWidth(), // используем outerWidth для учета границ
buttonHeight = $(this).outerHeight(); // используем outerHeight для учета границ
// Создаем ripple элемент
let $ripple = $("<span class='ripple'></span>");
$(this).prepend($ripple); // добавляем ripple к текущей кнопке
// Выравнивание ширины и высоты
if (buttonWidth >= buttonHeight) {
buttonHeight = buttonWidth;
} else {
buttonWidth = buttonHeight;
}
let x = e.pageX - posX - buttonWidth / 2;
let y = e.pageY - posY - buttonHeight / 2;
$ripple.css({
width: buttonWidth,
height: buttonHeight,
top: y + 'px',
left: x + 'px'
}).addClass("rippleEffect");
// Добавим таймер для удаления ripple
setTimeout(() => {
$ripple.remove(); // удаляем ripple после анимации
}, 600); // время анимации должно соответствовать вашим CSS
});
```
### Объяснение:
1. **Проверка наличия элемента**: Сначала проверяем, существует ли элемент (`if (!$(this).length) return;`). Хотя это не обязательно, так как вы используете делегирование событий, это может быть полезно для других случаев.
2. **`outerWidth` и `outerHeight`**: Используем `outerWidth` и `outerHeight`, чтобы учитывать любые границы или отступы.
3. **Создание и удаление `ripple`**: Создаем новый элемент `span` для эффекта ripple и удаляем его через заданный интервал времени после выполнения анимации.
Сделанные изменения помогут вашему скрипту работать корректно даже если на странице отсутствуют некоторые элементы кнопок.