JQuery Добавить слушатель работает из консоли, а не из js файла

Question

У меня есть функция:

    () => {
        console.log('before');
        $('#scope_limit_toggle').change((e) => {
            console.log('from event');
        });
    }

Элемент, который прослушивается, это просто bootstrap элемент переключения, подобный этому:

    <input id ="scope_limit_toggle" type="checkbox" checked data-toggle="toggle">

Проблема в том, что я не могу зарегистрировать слушателя этого события любым способом. Я попытался использовать:

    window.onload = () => {}

и

    $(function() {}

Я создал тестовую кнопку, которая при нажатии выполняет эту функцию, но результат все тот же. Каждый раз этот первый console.log () я вижу напечатанным в консоли, но остальное кажется не работающим (но у меня нет ошибки в консоли). Самым странным для меня является то, что, если я пытаюсь добавить этот слушатель в консоль браузера - он волшебным образом работает.

Итак, подведем итог: я могу выполнить целую функцию и увидеть сначала напечатанную console.log (), но могу добавить слушателя этого события. Однако, когда я пытаюсь сделать то же самое из консоли браузера - это работает. Есть идеи?

Answer 1

Для решения проблемы требовалась большая картинка, о которой я не упомянул в вопросе (я не думал, что это важно) - мое приложение создается с помощью веб-пакета, но живет в более крупной среде, где jQuery уже загружено. Но я также загрузил jQuery с npm в мою сборку веб-пакета и возник конфликт (хотя и не привел к каким-либо ошибкам во время сборки или использования приложения).

Каково было решение? jQuery был загружен, поэтому просто используйте его в веб-пакете, как указано здесь: https://webpack.js.org/configuration/externals/.

Теперь все работает отлично.