Работа с селекторами, после подгрузки html через ajax

@Js_Skriptor · Регистрация: 06.06.2014

Студворк — интернет-сервис помощи студентам

Добрый день!

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

HTML5
1
<a href="javascript:void(0);" class="buyButton" onclick="return BuyE('100/200 (44)', '1100','Эконом','/catalog/audi/100-200-44/');">Заказать</a>

Функция выполняется и передает параметры в другую функцию

JavaScript
1
2
3
4
5
6
7
8
function BuyE(name,price,type,page){
        var artE = $("#artE>span").text();
        var complE = $("#complE input:checked").attr("value");
        var color = $('.colorLine').find(".active").text();
        if(name && artE && price && color){
            form(name,artE,price,type,color,page,complE);
        }
    }

Следующая функция отправляет пост запрос

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function form(name,art,price,type,color,page,compl){
        if(!compl){
            compl = "Не установлено";
        }
        $.ajax({
            url:     "/include/buy.php",
            type:     "POST",
            data:{name:name,art:art,price:price,type:type,color:color,page:page,compl:compl},
                beforeSend: function() { 
                    $(".overlay").remove();
                },      
                success: function(answer) { 
                    $("body").append(answer);
                    //alert(answer);
                },
                error: function() {
                    alert("Не возможно отправить");
                }
        });
 
    }

в PHP скрипте выполняются некоторые действия, переменные $user && $phone при первом запросе еще не установлены

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?if($user && $phone){      
...
...
        
        
    }
    else{
        echo('
        <div class="overlay">
            <div class="form fancybox-wrap">
                <form action="/include/buy.php" id="order" method="POST" class="popUpForm">
                    <input name="name" type="hidden" value="'.$name.'">
                    <input name="art" type="hidden" value="'.$art.'">
                    <input name="price" type="hidden" value="'.$price.'">
                    <input name="type" type="hidden" value="'.$type.'">
                    <input name="color" type="hidden" value="'.$color.'">
                    <input name="page" type="hidden" value="'.$page.'">
                    <input name="compl" type="hidden" value="'.$compl.'">
                    <input name="user_name" type="text" value="'.$user.'" class="user_name" placeholder="Ваше имя *">
                    <input name="phone" type="text" value="'.$phone.'" class="user_phone" placeholder="Ваш телефон *">
                    <textarea name="comment"  class="message" placeholder="Комментарий к заказу"></textarea>
                    <button type="button" class="submit" onclick="Order(order);">Оформить</button>
                </form>
                <a href="javascript:void(0);" class="fancybox-close"></a>
            </div>
        </div>
        ');
    }?>

Мне нужно что бы ответ приходил в подгруженный html, функция Order(form) выполняется

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
function Order(form){
        var name = form.name.value;
        var art = form.art.value;
        var price = form.price.value;
        var type = form.type.value;
        var color = form.color.value;
        var page = form.page.value;
        var compl = form.compl.value;
        var phone = form.phone.value;
        var user_name = form.user_name.value;
         
        $.ajax({
            url:     "/include/buy.php",
            type:     "POST",
            response: "HTML",
            data:{
                    name:name,
                    art:art,
                    price:price,
                    type:type,
                    color:color,
                    page:page,
                    compl:compl,
                    phone:phone,
                    user_name:user_name
                },
                beoreSend: function() { 
                    $(".overlay").remove();
                },      
                sucess: function(data) { 
                    $("body").append(answer);
                    //alert(data);
                },
                error: function() {
                    alert("Не возможно отправить");
                }
        });
    }

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

Смотрел функцию .delegate(); не могу понять смогу ли я её использовать

Знающие люди, подскажите.

@Vadim_Lasso · 17.11.2015, 15:54

Js_Skriptor, у кнопки:

HTML5
1
<button type="button" class="submit" onclick="Order(order);">Оформить</button>

уберите атрибут onclick="Order(order);".
А в JS добавьте обработчик методом .on(), который использует делегирование (всплытие событий), т.е. позволяет создать обработчик до того, как элемент появится в DOM-е. Он более универсален, в отличии от устаревшего метода .delegate().

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
$(function() {
    $('.popUpForm .submit').on('click', Order);
});
 
function Order(form) {
        var name = form.name.value;
        var art = form.art.value;
        var price = form.price.value;
        var type = form.type.value;
        var color = form.color.value;
        var page = form.page.value;
        var compl = form.compl.value;
        var phone = form.phone.value;
        var user_name = form.user_name.value;
         
        $.ajax({
            url:     "/include/buy.php",
            type:     "POST",
            response: "HTML",
            data:{
                    name:name,
                    art:art,
                    price:price,
                    type:type,
                    color:color,
                    page:page,
                    compl:compl,
                    phone:phone,
                    user_name:user_name
                },
                beoreSend: function() { 
                    $(".overlay").remove();
                },      
                sucess: function(data) { 
                    $("body").append(answer);
                    //alert(data);
                },
                error: function() {
                    alert("Не возможно отправить");
                }
        });
}

Добавлено через 8 минут
А вообще проблема у вас не в делегировании, а в том, что в функции Order() в

JavaScript
1
2
3
sucess: function(data) { 
      $("body").append(answer);
}

В $("body").append() просто надо передавать не answer а data

@Js_Skriptor · 17.11.2015, 16:33 **[ТС]**

Vadim_Lasso, куда мне этот обработчик вешать?

JavaScript
1
2
3
$(function() {
    $('.popUpForm .submit').on('click', Order);
});

Вот этот код подгружен аяксом вниз страницы

HTML5
1
2
3
4
5
6
7
8
9
<div class="overlay">
            <div class="form fancybox-wrap">
                <form action="/include/buy.php" id="order" method="POST" class="popUpForm">
                    ........
                    <button type="button" class="submit" onclick="Order(order);">Оформить</button>
                </form>
                <a href="javascript:void(0);" class="fancybox-close"></a>
            </div>
</div>

В этом то вся и соль.

Этот подгруженный блок, должен реагировать на селекторы

@Almag13 · 18.11.2015, 02:46

JavaScript
1
2
3
$(function() {
    $('.popUpForm .submit').on('click', Order);
});

Вешать нужно в файл где скрипты или через script в шапке
Сейчас в моде использовать ненавящивый js

@Js_Skriptor · 18.11.2015, 09:30 **[ТС]**

Код рабочий, опечатка была в

JavaScript
1
sucess

и соответственно (data)

Новые блоги и статьи Все статьи Все блоги /
Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .
Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .