Почему скрипт не работает, но при этом нормально отрабатывает в консоли?

Question

[lagudal]

есть такой скрипт простой, по клику на опр. баттон страница подтягивается скроллом к выбранному элементу.

$.each($('.checkout-billing-address .action.action-update'), (index, el) => { 
      $(el).bind('click', () => {
        $('html, body').animate({
          scrollTop: $('.billing-address-title').offset().top
        }, 300);
      });
    })

Скрипт вместе с остальными кастомными скриптами в одном файле, файл минимизирован, загружен и выполнен - все скрипты на jquery, все кроме этого отрабатывают штатно.
Этот же скрипт - как будто игнорируется.
При этом. если его вручную запустить из консоли, то все нормально, скрипт работает.
Ошибок в консоли нет, за исключением -

Error parsing header X-XSS-Protection: 1; mode=block, 1; mode=block: expected semicolon at character position 13. The default protections will be applied.

Однако эта ошибка на всех страницах сайта, и вообще не похоже, что она как то связана с моим скриптом.
Просто в недоумении, почему? Попробовал этот скрипт перенести на ванильный js - то же самое - из консоли работает, из файла - нет... В чем проблема?

Comments

[Lander]

А есть шанс что код начинает работать ДО того как готов DOM и элемент .checkout-billing-address .action.action-update соответственно?

[lagudal]

Вот задумался.... там элемент .action.action-update - кнопка в форме, форма сама скрыта по дефолту css - display: none;
раскрывается кликом по кнопке - условно говоря, "изменить", после этого клика форма становится видна а кнопка "изменить" скрывается. Но изначально в DOMe все, да.

[lagudal]

Lander,
До сих пор не разобрался, скрипт как оказалось срабатывает, но как то странно, через 2 раза на третий, или даже реже, т.е. вот перезагружаешь страницу, он вдруг сработал как надо, потом перезагружаю раз 5-6 - не сработал, или может 2-3 раза подряд сработать и опять в даун...
Пробовал дебажить - ничего не мешает как будто, и никакой логики либо последовальности, почему так, найти не могу. Больше всего похоже на то, что скрипт конфликтует с другими скриптами на странице... буду искать дальше..

[Lander]

lagudal, Попробуйте всё таки обернуть:

$(document).ready(function() {

$.each($('.checkout-billing-address .action.action-update'), (index, el) => { 
      $(el).bind('click', () => {
        $('html, body').animate({
          scrollTop: $('.billing-address-title').offset().top
        }, 300);
      });
    });

});

[lagudal]

Lander,
нет, не срабатывает. Но что характерно - в файле, где непосредственно скрипты этой формы, все срабатывает без проблем. Хотел, как обычно, все пользовательские изменения в одном кастомном файле собрать, но вот пока так...

[Lander]

lagudal, Дайте догадаюсь, а форма не ajax-ом грузится случайно?

[lagudal]

Lander,
точно

[Lander]

lagudal, Так тогда вам вместо bind нужно использовать on. Не силён в js и не знаю как сделать это с помощью стрелочной функции, но идея такая

$('body').on('click', '.selector', function() {
    $('html, body').animate({
        scrollTop: $('.billing-address-title').offset().top
    }, 300);
});

Ну вместо .selector нужно подставить селектор для нужной вам кнопки.

Ну либо переносить ваш код в success-функцию вызова ajax с помощью которой вы грузите форму.