0 / 0 / 0
Регистрация: 13.09.2010
Сообщений: 14
1

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

01.01.2014, 20:14. Показов 14845. Ответов 7
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Добрый день, господа!

Избитая, но все еще актуальная тема:
Не получается работать с созданными с помощью 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('Ошибка передачи данных!');
 
       }
});

Подскажите куда копать..?!
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
01.01.2014, 20:14
Ответы с готовыми решениями:

Работа с с динамически созданными элементами
Здравствуйте, не могу разобратся с манипулированием созданных элементов.При создании нового...

Работа с программно созданными элементами управления
Я добавляю на Панель формы элементы управления следующим образом: PanelInsert.Controls.Add(new...

Сохранение состояния формы с динамически созданными элементами
У меня есть форма на ней пользователь создает n-ое количество PictureBox, каким образом можно...

Написать скрипт, рекурсивно обходящий дерево DOM страницы dom.html, начиная от корня DOM
Написать скрипт на языке JavaScript, рекурсивно обходящий дерево DOM страницы dom.html, начиная от...

7
268 / 268 / 109
Регистрация: 22.08.2013
Сообщений: 907
02.01.2014, 11:07 2
Math88, как Вы выводить динамически эту форму? Скрипт в студию.
0
0 / 0 / 0
Регистрация: 13.09.2010
Сообщений: 14
02.01.2014, 16:08  [ТС] 3
Вот обработчик элемента #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 на странице не видно..
Вроде все написал = )
0
268 / 268 / 109
Регистрация: 22.08.2013
Сообщений: 907
02.01.2014, 17:22 4
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 секунд
Должно заработать.
0
0 / 0 / 0
Регистрация: 13.09.2010
Сообщений: 14
02.01.2014, 18:02  [ТС] 5
Поправил, но проблема не ушла..
0
268 / 268 / 109
Регистрация: 22.08.2013
Сообщений: 907
02.01.2014, 19:46 6
Math88, а что если выставлять каждый раз обработчики в AjaxSucces?

Добавлено через 26 секунд
Этот вариант проверьте, но не в тандеме с моей предыдущей рекомендацией.
1
0 / 0 / 0
Регистрация: 13.09.2010
Сообщений: 14
03.01.2014, 01:16  [ТС] 7
Ну не совсем я понял, что значит "выставлять каждый раз обработчики"...видимо переопределять элементы DOM после получения данных. Крутил, крутил, так и не заработало...

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

Javascript
1
$('#butregconfirm').on('click', function(){
на
Javascript
1
$('#content').on('click', '#butregconfirm', function(){
И все заработало!

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


Да, и я все-таки использовал .append, хотя это не критично с первого взгляда, но по-моему правильно...
0
268 / 268 / 109
Регистрация: 22.08.2013
Сообщений: 907
03.01.2014, 12:34 8
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());
1
03.01.2014, 12:34
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
03.01.2014, 12:34
Помогаю со студенческими работами здесь

Создать объект jquery из элементов DOM
День добрый, подскажите, возможно создать объект из инпутов DOM с ключами из name и свойствами...

Работа с динамически созданными объектами
как узнать какой объект подал сообщение на выполнение события. Возможно я выразился кучерявенько но...

Работа с динамически созданными обьектами
Конкретно нужно создать один обьект(TCppWebBrowser) и указать его родителем другой обьект который...

работа со значениями, созданными в цикле
Доброго времени суток!) Подскажите пожалуйста, как работать со значениями, созданными в цикле? То...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru