Как правильно подключить код JS?

Question

[xxvxx]

При клике на кнопку идет ajax запрос и загружается форма. После ее надо обработать на JS, сразу я не могу определить переменные с этой формы так как ее нет и будет ошибка, как правильно подключать JS в таких ситуациях?

Answer 1

[Антон]

Код бы, как запрос выполняется, как форму на страницу вставляете. В общем случае, после того как форму на страницу добавили - навешиваете обработчики на неё.

Comments

[xxvxx]

Ну это понятно, как именно подключать эти обработчики?

[Антон]

xxvxx, зависит от того что у вас за JS. Если никаких библиотек/фремворков - то через addEventListener(), в jQuery через on(), bind(), delegate().
Просто вы так написали, что ошибка когда формы нет, я подумал, что если форма есть - то обработчики у вас на неё навешиваются, поэтому и предположил, что код уже есть.

[xxvxx]

Антон,

let form = document.querySelector(".form");
form.addEventListener("click", fun)
function fun() {
    console.log(true);
}

если я так напишу у меня будет ошибка так как нет формы она еще не загрузилась, я не могу понять как мне корректно подключить JS после того как пользователь кликнул и форма подгрузилась

[Alfieros]

xxvxx, код в студию где вы делаете ajax запрос.
Пишите ф-цию обработчика отдельно. Далее в том месте, где происходит ajax запрос в success помещаете вызов этой функции. Или же пишите другое событие которое вам нужно и туда помещаете вызов обработчика.

Приведу пример на пальцах:

function validator() {
// тут  ваш обработчик
}
        $.ajax({
            url: '/ajax',
            data: data,
            processData: false,
            contentType: false,
            type: 'POST',
            dataType: 'html',
            success: function(html) {
            // тут вы вызываете форму
            validator(); // если запрос успешен и форма появилась, следом вызываете обработчик.
            }
        });

Answer 2

[Валерий Машков]

поместить код непосредственно в атрибут события HTML-элемента;
поместить код между открывающим и закрывающим тегами

Comments

[xxvxx]

<div class="modal">
<form>
</form>
<script src="fun.js"></script>
</div>

Вот так?

Answer 3

[xxvxx]

https://qna.habr.com/q/418465