Как отправить AJAX форму, которая создана на лету?

Question

[Cheizer]

Друзья, вроде обычное дело, но вот застрял, весь день копаюсь и не пойму как это сделать.

Есть скрипт отправки форм с сайта AJAXом, все просто и работает ЕСЛИ форма с id уже существовала при загрузке страницы.
НО если id добавить динамически по событию CLICK например по кнопке, то получается такой формы для AJAX скрипта не существует, и мол надо как то перезагрузить DOM дерево? Или что вообще нужно?

Вот пример как работает (код упростил, оставил суть):

Форма:

<form id="form1" class="form">
                        <input type="text" value="" placeholder="Введите ваше имя:">
                        <input type="tel" value="" placeholder="Введите ваш телефон:">
                        <a href="#" data-type="submit">ОТПРАВИТЬ ЗАЯВКУ</a>
</form>

Отправляю:

$(window).load(function () {
    $('#form1').forms({
        ownerEmail: '[e-mail]',
        product: 'Заявка с сайта'
    })

Подключаемый внизу страницы js файл с логикой

$.ajax({
                                type: "POST",
                                url: '/MailHandler.php',
                                data: {
                                    name: _.getValFromLabel($('.name', _.form)),
                                    phone: _.getValFromLabel($('.phone', _.form)),
                                    pro_duct: _.product,
				    owner_email:_.ownerEmail,
                                    stripHTML: _.stripHTML
                                }
                            })

/*-------------------------------------------------------------*/

НО ЕСЛИ id формы генерить ПОСЛЕ загрузки страницы по событию CLICK, то форма не отправляется :(

<a href="#" data-id="['динамический id']" class="btn">услуга</a>

$('.btn').on('click', function () {
    var dataidx = $(this).attr('data-id');
    $('form').attr('id','form'+dataidx);
});

Форма:

<form id="form['динамический id']" class="form">
                        <input type="text" value="" placeholder="Введите ваше имя:">
                        <input type="tel" value="" placeholder="Введите ваш телефон:">
                        <a href="#" data-type="submit">ОТПРАВИТЬ ЗАЯВКУ</a>
</form>

Отправляю:

$(window).load(function () {
    $('#form['динамический id']').forms({
        ownerEmail: '[e-mail]',
        product: 'Заявка с сайта'
    })

Как быть в таком случае? Как поступают при таких раскладах?
Очень не хочется для каждой услуги распечатывать свою форму сразу, хочется менять динамически одну форму подставляя id услуги.

Answer 1

[Никита Кит]

Всё просто. Когда ты динамически создаёшь новый компонент по клику, после инициализации всех скриптов, компонент не привяжется к своей логике. Просто потому что сначала создаём - потом инициализируем логику. Если логика уже обработана браузером, при добавлении новой разметки она не привяжется к своей логике, но это легко поправить.
Пишем в переменную 2 разные функции. В первой - динамическое добавление разметки в DOM, во второй - логика, которую нужно привязать к разметке. Условно назову их create() и initAjaxOnForm().
Как только document ready - в коллбэк create(в аргументы закинем селектор родителя, куда пулять разметку) потом ajaxForm(в аргументы селектор компонента)
Так же и в btn.click ->
create(node)
ajaxForm('.form')

А вообще для подобных нужд есть Vue / React и прочие

Comments

[Cheizer]

Да да, я понимаю причину, что не существует нового динамически созданного id формы для скрипта отправки, но сталкиваюсь с этим впервые, можно немного поподробнее?, а то сленга много :)) не понимаю.

[Cheizer]

А может просто запаковать функцию AJAX отправки, и инициализировать после создания динамической формы? И не создавать функцию create?

[Никита Кит]

Роман Кузнецов, Я на самом деле не особо понимаю что делает метод forms - я впервые его вижу в jQuery, хотя вроде не первый день его юзаю. Да и в принципе на словах описании вопроса сложно понять что именно нужно делать скрипту

[Cheizer]

Никита Кит, FORMS :))) это функция отправки AJAXом письма, в нее и передаем email и заголовок письма.

[Cheizer]

в функции FORMS и содержится код отправки

$.ajax({
                                type: "POST",
                                url: '/MailHandler.php',
                                data: {
                                    name: _.getValFromLabel($('.name', _.form)),
                                    phone: _.getValFromLabel($('.phone', _.form)),
                                    pro_duct: _.product,
            owner_email:_.ownerEmail,
                                    stripHTML: _.stripHTML
                                }
                            })

[Никита Кит]

Роман Кузнецов,

$('#form['динамический id']').forms({
        ownerEmail: '[e-mail]',
        product: 'Заявка с сайта'
    })

тогда просто продублируй инициализацию логики аякса в клике - она обновится

$('.btn').on('click', function () {
    var dataidx = $(this).attr('data-id');
    $('form').attr('id','form'+dataidx);
    $('#form'+dataidx).forms({
        ownerEmail: '[e-mail]',
        product: 'Заявка с сайта'
    })
});

[Cheizer]

Никита Кит, точняк! Так работает! Спасибо бро! :)

Answer 2

[Justique]

$(document).on('click', '.btn', function () {
 ...
});

Comments

[Никита Кит]

наоборот делегирование только усугубит - контекст коллбэка будет весь документ, а не нужная нам кнопка с id

[Cheizer]

Спасибо, но это не работает тоже.