Обновление 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());

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@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