Почему не выполняется функция из подгруженного через ajax контента?

Question

[IliaMal]

Здравствуйте.

Раньше все время пользовался таким методом, все работало:
В подгруженном через ajax контенте выполнял нужный js через onclick

<a href="#popup" class="popup-link" onclick="jsDo({action: `two`, title: `#TWO`});">Попап №2</a>

Функция jsDo() расположена в файле function.js, который подключается в теле страницы:

...
</body>
<script type="module" src="js/functions.js"></script>
<script type="module" src="js/index.js"></script>
</html>

Сейчас перехожу на TypeScript c использованием ООП, возможно по этому не работает такой метод. При клике по ссылке отдает

Uncaught ReferenceError: jsDo is not defined

, хотя файл functions.js точно подключен.

Проблема как то связанна с тем, что я стал использовать классы?
Как правильно реализовать выполнение скрипта в документах подгруженных через ajax?

Контент из ajax запроса добавляется в документ через innerHTML
Содержимое functions.js:

import Ajax from "./moduls/ajax.js";

const ajax =  new Ajax();

console.log('jsDo');
function jsDo(post: object): void {
    ajax.setRequest(post);
    ajax.resultProcessing('.popup__ajax');
}

Answer 1

[romazhan]

Вызов функции `jsDo` из тега `a` с использованием атрибута `onclick` работает только если функция объявлена в области видимости, в которой выполняется обработчик события `click`. Это означает, что если функция `jsDo` объявлена в модуле, то она не будет доступна для вызова из разметки HTML.

Одна из возможных реализаций с учетом ООП - это создание экземпляра класса с нужными методами, в которые можно передавать необходимые параметры, и обработка события `click` у тега `a` через вызов этих методов.

Например, можно создать класс `PopupHandler`, содержащий метод `open`, который будет отвечать за обработку нажатия на ссылку:

class PopupHandler {
  private ajax: Ajax;

  constructor() {
    this.ajax = new Ajax();
  }

  open(action: string, title: string): void {
    this.ajax.setRequest({ action, title });
    this.ajax.resultProcessing('.popup__ajax');
  }
}

const handler = new PopupHandler();

Теперь вы можете использовать экземпляр класса `PopupHandler` для обработки события `click` у тега `a`:

<a href="#popup" class="popup-link" onclick="handler.open('two', '#TWO')">Попап №2</a>

Таким образом, функция `open` будет вызываться при каждом нажатии на ссылку, и вы можете использовать ее для обработки запроса с нужными параметрами.

Класс `PopupHandler` должен быть объявлен в области видимости, доступной из разметки HTML. Это может быть файл, подключенный к странице через тег script, или модуль, импортируемый с помощью директивы `import`.

Comments

[IliaMal]

Спасибо, все получилось, но пришлось немного переделать.
Так как у меня скрипты подключаются с тегом type="module" в таком виде как вы описали onclick не работает даже без ajax-а, пришлось в файле functions.js экспортировать класс export default PopupHandler;,
а на странице подключать его через import и добавлять к объекту window

<script type="module">
    import handler from "/simple/js/functions.js"
    window.handler = handler;
</script>

Ну и соответственно в onclick будет вызываться так

<a href="#popup" class="header__phone popup-link" onclick="window.handler.open({action: `two`, title: `#TWO`});">Попап №2</a>

Так все работает и на статической страницы и в ajax, но выглядет так то костыльно.
Буду благодарен если кто то напишет как сделать по человечески, пока оставлю так.