Обновление DOM. Работа с созданными jquery элементами

@Math88 · Регистрация: 13.09.2010

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

Добрый день, господа!

Избитая, но все еще актуальная тема:
Не получается работать с созданными с помощью jquery элементами. Их просто не видно.

Вроде есть самый актуальный на этот момент метод .on
Но и с ним все равно не видно элементы...расскажите как правильно его использовать?!

=========Это то, что сгенерил и вывел скрипт (с помощью ajax запроса)===============================

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
29
30
31
32
33
case 'register' :
        
        echo '
        <div class="cinput">
        Логин:<br/>
        <input name="login" type="text" value="" id="loginreg"/><br/>
        Пароль:<br/>
        <input name="password" type="password" value="" id="passwordreg1"/><br/>
        Подтверждение пароля:<br/>
        <input name="password" type="password" value="" id="passwordreg2"/><br/><br/>
        
        
        Имя:<br/>
        <input name="login" type="text" value="" id="namereg"/><br/>
        Фамилия:<br/>
        <input name="login" type="text" value="" id="sernamereg"/><br/><br/>
        
        
        Город:<br/>
        <input name="City" type="text" value="" id="cityreg"/><br/>
        Адрес:<br/>
        <input name="login" type="text" value="" id="adressreg"/><br/><br/>
        
        
        Телефон:<br/>
        <input name="login" type="text" value="" id="phonereg"/><br/>
        E-Mail:<br/>
        <input name="login" type="text" value="" id="emailreg"/><br/><br/>
        
        <input type="submit" value="Зарегистрироваться" id="butregconfirm"/>
        </div>';
 
        break;

===========А это, скрипт, который должен обработать элемент с id="butregconfirm"=====================

// в общем не видит. Если выводить не динамически, то все работает. То есть сам обработчик правильный..

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
43
44
45
46
47
48
49
50
51
$('#butregconfirm').on('click', function(){
 
    alert('Hello!');
     var loginreg = $("#loginreg").val();
     var passwordreg1 = $("#passwordreg1").val();
     var passwordreg2 = $("#passwordreg2").val();
     var namereg = $("#namereg").val();
     var sernamereg = $("#sernamereg").val();
     var surnamereg = $("#surnamereg").val();
     var cityreg = $("#cityreg").val();
     var adressreg = $("#adressreg").val();
     var phonereg = $("#phonereg").val();
     var emailreg = $("#emailreg").val();   
    
            
 
    $.post("library/reg.php",{login : loginreg, password1 : passwordreg1, password2 : passwordreg2, name : namereg, surname : sernamereg, city : cityreg, adress : adressreg, phone : phonereg, email : emailreg}, AjaxSuccess); 
        
    
    function AjaxSuccess(data)
    {
 
    // Здесь мы получаем данные, отправленные сервером и обрабатываем их
        if (data) {
            switch (data) {     
                case 'MES1' : 
                    alert('Вы успешно зарегистрированы!');
                break;
                case 'ERROR1' : 
                    alert('Заполните обязательные поля!');
                break;
                case 'ERROR2' : 
                    alert('Выбранный логин уже существует!');
                break;  
                case 'ERROR3' : 
                    alert('Введенные пароли не совпадают!');
                    $("#passwordreg1").val('');
                    $("#passwordreg2").val('');
                break;
                
                default:
                    //очищаем текстовое поле после успешной вставки
                    $("#loginreg").val('');
                    alert('Ошибка регистрации!');
                    
            }
        }
        else alert('Ошибка передачи данных!');
 
       }
});

Подскажите куда копать..?!

@Razip · 02.01.2014, 11:07

Math88, как Вы выводить динамически эту форму? Скрипт в студию.

@Math88 · 02.01.2014, 16:08 **[ТС]**

Вот обработчик элемента #butreg

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
$('#butreg').on('click', function(){
    
    $.get("profile.php",{mode : 'register'}, AjaxSuccess); 
    function AjaxSuccess(data)
    {
   
        if (data) {
            $('#content').html(data);
                    }
        else alert('Ошибка передачи данных!');
 
      }
});

Нажали на #butreg - выполнили profile.php (case register)

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
$mode = (isset($_GET['mode']) && $_GET['mode'] != '') ? $_GET['mode'] : 'login';
 
switch ($mode) {
    case 'sendpassword' :
        echo 'Восстановление пароля';
        echo '<table border="0"><tr ><td>E-Mail</td><td><input type="text"/></td></tr></table><br/><input type="submit" value="Отправить"/>';
        $subject = 'Восстановление пароля test.ru';
        $email   = $shopConfig['email'];
        $message = 'С сайта www.test.ru было запрошено восстановление пароля к вашей учетной записи.<br> Ваш новый пароль: Вы можете изменить его в личном кабинете.';
        mail($email, $subject, $message, "From: admin@test.ru\r\nReturn-path: admin@test.ru");
 
        break;
        
    case 'viewprofile' :
        echo 'Мой профиль.';
        
        break;
 
    case 'login' :
 
        break;
 
    case 'register' :
        
        echo '
        <div class="cinput">
        Логин:<br/>
        <input name="login" type="text" value="" id="loginreg"/><br/>
        Пароль:<br/>
        <input name="password" type="password" value="" id="passwordreg1"/><br/>
        Подтверждение пароля:<br/>
        <input name="password" type="password" value="" id="passwordreg2"/><br/><br/>
        
        
        Имя:<br/>
        <input name="login" type="text" value="" id="namereg"/><br/>
        Фамилия:<br/>
        <input name="login" type="text" value="" id="sernamereg"/><br/><br/>
        
        
        Город:<br/>
        <input name="City" type="text" value="" id="cityreg"/><br/>
        Адрес:<br/>
        <input name="login" type="text" value="" id="adressreg"/><br/><br/>
        
        
        Телефон:<br/>
        <input name="login" type="text" value="" id="phonereg"/><br/>
        E-Mail:<br/>
        <input name="login" type="text" value="" id="emailreg"/><br/><br/>
        
        <input type="submit" value="Зарегистрироваться" id="butregconfirm"/>
        </div>';
 
        break;
 
        
    default :
    
        echo 'Действие по умолчанию';
}

Потом пытаемся обратиться к созданному элементу..

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
43
44
45
46
47
48
49
50
51
52
53
54
$('#butregconfirm').on('click', function(){
 
    alert('Hello!');
     var loginreg = $("#loginreg").val();
     var passwordreg1 = $("#passwordreg1").val();
     var passwordreg2 = $("#passwordreg2").val();
     var namereg = $("#namereg").val();
     var sernamereg = $("#sernamereg").val();
     var surnamereg = $("#surnamereg").val();
     var cityreg = $("#cityreg").val();
     var adressreg = $("#adressreg").val();
     var phonereg = $("#phonereg").val();
     var emailreg = $("#emailreg").val();
     
     
    
    
            
 
    $.post("library/reg.php",{login : loginreg, password1 : passwordreg1, password2 : passwordreg2, name : namereg, surname : sernamereg, city : cityreg, adress : adressreg, phone : phonereg, email : emailreg}, AjaxSuccess); 
        
    
    function AjaxSuccess(data)
    {
 
    // Здесь мы получаем данные, отправленные сервером и обрабатываем их
        if (data) {
            switch (data) {     
                case 'MES1' : 
                    alert('Вы успешно зарегистрированы!');
                break;
                case 'ERROR1' : 
                    alert('Заполните обязательные поля!');
                break;
                case 'ERROR2' : 
                    alert('Выбранный логин уже существует!');
                break;  
                case 'ERROR3' : 
                    alert('Введенные пароли не совпадают!');
                    $("#passwordreg1").val('');
                    $("#passwordreg2").val('');
                break;
                
                default:
                    //очищаем текстовое поле после успешной вставки
                    $("#loginreg").val('');
                    alert('Ошибка регистрации!');
                    
            }
        }
        else alert('Ошибка передачи данных!');
 
       }
});

...и вот теперь тишина. Такого динамически созданного элемента #butregconfirm на странице не видно..
Вроде все написал = )

@Razip · 02.01.2014, 17:22

Math88, вставлять DOM-элементы нужно append'ом.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$('#butreg').on('click', function(){
    
    $.get("profile.php",{mode : 'register'}, AjaxSuccess); 
    function AjaxSuccess(data)
    {
   
        if (data) {
            $('#content').html('');
            $('#content').append(data);
                    }
        else alert('Ошибка передачи данных!');
 
      }
});

Добавлено через 17 секунд
Должно заработать.

@Math88 · 02.01.2014, 18:02 **[ТС]**

Поправил, но проблема не ушла..

@Razip · 02.01.2014, 19:46

Math88, а что если выставлять каждый раз обработчики в AjaxSucces?

Добавлено через 26 секунд
Этот вариант проверьте, но не в тандеме с моей предыдущей рекомендацией.

@Math88 · 03.01.2014, 01:16 **[ТС]**

Ну не совсем я понял, что значит "выставлять каждый раз обработчики"...видимо переопределять элементы DOM после получения данных. Крутил, крутил, так и не заработало...

Но пока читал про это нашел про Делегирование событий. Это другой подход...если заходить со стороны использования .on
В общем смысл делегирования в том, что бы контролировать родительский элемент, который не изменялся а не "свежеполученный". Поэтому заменяем одну строку:

JavaScript
1
$('#butregconfirm').on('click', function(){

на

JavaScript
1
$('#content').on('click', '#butregconfirm', function(){

И все заработало!

Razip, спасибо за идеи...таки дошли до истины) Может кому еще будет полезно..

Да, и я все-таки использовал .append, хотя это не критично с первого взгляда, но по-моему правильно...

@Razip · 03.01.2014, 12:34

Math88, я имел ввиду устанавливать обработчики событий каждый раз, когда мы обновляем (удаляем и вставляем с помощью .html()) содержимое элемента.

Добавлено через 22 минуты
Ваш способ правильнее, но раньше я использовал вот такой в своем проекте:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function someAjax() {
    $.get('profile.php', {mode: 'register'}, function(data) {
        if (data) {
            //Выставляем то что возвратил сервер
            $('#content').html(data);
 
            //Устанавливаем обработчик
            $('#butregconfirm').click(function() {
                //Он будет опять вызывать эту же функцию
                //т.к. действие при нажатии должно повторяться
                someAjax();
            });
        } else {
            alert('Ошибка передачи данных!');
        }
    });
}
 
$('#butregconfirm').click(someAjax());

Новые блоги и статьи Все статьи Все блоги /
Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .	Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)" Hrethgir 19.04.2026 Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .	Запрет удаления строк ТЧ документа при определенном условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .	Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .
Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .

@Razip 268 / 268 / 109 Регистрация: 22.08.2013 Сообщений: 907
	02.01.2014, 11:07
	Math88, как Вы выводить динамически эту форму? Скрипт в студию. 0

@Math88 0 / 0 / 0 Регистрация: 13.09.2010 Сообщений: 14
	02.01.2014, 18:02 [ТС]
	Поправил, но проблема не ушла.. 0

@Razip 268 / 268 / 109 Регистрация: 22.08.2013 Сообщений: 907
	02.01.2014, 19:46
	Math88, а что если выставлять каждый раз обработчики в AjaxSucces? Добавлено через 26 секунд Этот вариант проверьте, но не в тандеме с моей предыдущей рекомендацией. 1

Опции темы