Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.81/32: Рейтинг темы: голосов - 32, средняя оценка - 4.81
3 / 3 / 0
Регистрация: 22.02.2010
Сообщений: 52
1

Отработка событий через $(document).on

28.03.2014, 10:17. Показов 6230. Ответов 9
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Здравствуйте, проблема следующая.
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
            $(document).on("click", "button#del_user",function() {
                
                currentid = $(this);
                var request = $.ajax({
                    url : "****",
                    type: "POST",
                    data: {del_user : $(this).closest("tr").find("input").attr("value")},
                    datatype:"html"
                });
                request.done(function(data) {                    
                    currentid.closest("tr").remove();                                  
                });
                request.fail(function(data) {
                    alert("По неизвестной причине не удалось выполнить удаление;");
                });
            });
До этого было
Javascript
1
 $("button#del_user").click
. А теперь потребовалась отработка динамически добавленного контента. Собственно я думаю вся проблема в
Javascript
1
currentid = $(this);
Судя по всему за $(this) теперь рассматривается весь документ, а не текущий button, который вызвал событие. Вопрос как мне выбрать объект, который вызывает событие в функции on.

Добавлено через 52 минуты
Частично проблему вот новый код, он теперь отрабатывает хотябы с изначальными данными, которые были на странице
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
            $(document).on("click", "button#del_user",function(event) {
                alert("1");
                currentid = event.target;
                var request = $.ajax({
                    url : "****",
                    type: "POST",
                    data: {del_user : $(event.target).closest("tr").find("input").attr("value")},
                    datatype:"html"
                });
                request.done(function(data) {
                    alert(data);
                    $(currentid).closest("tr").remove();                                  
                });
                request.fail(function(data) {
                    alert("По неизвестной причине не удалось выполнить удаление;");
                });
            });
Но теперь появилась другая проблема, в динамических данных есть такая строчка
HTML5
1
<input type="hidden" id="UID" value="12321321'">
В исходном коде она присутствует, но при просмотре через "Проинспектировать элемент" она отсутствует. Поэтому видимо не отрабатывает
Javascript
1
$(event.target).closest("tr").find("input").attr("value")
Добавлено через 18 минут
Данные добавляются через append
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
            $("button#submitUsers").click(function() {
                var dataString =  $("input[name=\'uAcc[]\']").serializeArray();
                dataString[dataString.length] = new Array();
                dataString[dataString.length-1] = '.$serviceID.';
 
      
                
                var request = $.ajax({
                    url : "****",
                    type: "POST",
                    data: {users: dataString},
                    datatype:"html"
                });
                request.done(function(data) {
                    $("#listOfUsers > table > tbody").append(data);
                    alert(data);
                    alert("Пользователям успешно добавлен доступ к сервису");
                });
                request.fail(function(data) {
                    alert("По неизвестной причине не удалось выполнить удаление;");
                });
            });
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
28.03.2014, 10:17
Ответы с готовыми решениями:

Ошибка в var iScrollTop = document.Fr1.document.body.ScrollTop;
есть страничка, на ней &lt;IFRAME name='Fr1'&gt;&lt;/IFRAME&gt;. Так вот когда я пишу var iScrollTop =...

Разница между document.querySelectorAll() и document.body.getElementByClassNam()
И document.querySelectorAll(&quot;selector&quot;) и document.body.getElementsByClassNam(&quot;selector&quot;)...

Доступ к document через iframe не работает
Доброго времени суток! Обращаюсь за помощью к опытным веб-программистам, которые знают толк в...

Как это работает (function(document) {.})(document);?
Добрый день! Нашёл замечательный скрипт menu effects. Хочу прикрутить к своему сайту. Во всех...

9
3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170
28.03.2014, 10:31 2
Цитата Сообщение от DarkDiabolik Посмотреть сообщение
До этого было*$("button#del_user").click
Этот синтаксис никто не отменял.
Цитата Сообщение от DarkDiabolik Посмотреть сообщение
Судя по всему за $(this) теперь рассматривается весь документ, а не текущий button, который вызвал событие.
Нет, $(this) - это именно объект jQuery, на котором и было вызвано событие.
Цитата Сообщение от DarkDiabolik Посмотреть сообщение
Частично проблему вот новый код
Это костыль, причем грубый, а не решение проблемы.
Причины проблемы надо искать где-то в другом месте. Это может быть и не правильное построение селекторов, и то, что у вас несколько элементов элементов с одинаковым id, а судя по вашему "новому коду" - это может быть и то, и другое, и что-то еще, оставшееся за кадром.
0
3 / 3 / 0
Регистрация: 22.02.2010
Сообщений: 52
28.03.2014, 12:08  [ТС] 3
Javascript
1
$("button#del_user").click
Никто не отменял, но работать с динамическим контентом он не будет.
Про $(this) ничего сказать не могу, но event.target хотя бы отрабатывает.

Добавлено через 7 минут
Хоть и принято за стандарт id должен быть уникальным, но ни разу не натыкался, на то что повторение являлось какой-то проблемой.
0
3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170
28.03.2014, 12:30 4
Цитата Сообщение от DarkDiabolik Посмотреть сообщение
Хоть и принято за стандарт id должен быть уникальным, но ни разу не натыкался, на то что повторение являлось какой-то проблемой.
Да что вы говорите? А ну-ка, покликайте в этом примере по div-ам:
HTML5
1
2
<div id="mydiv">DIV 1</div>
<div id="mydiv">DIV 2</div>
Javascript
1
2
3
$('#mydiv').click(function(){
    alert($(this).text());
});
Добавлено через 3 минуты
P.S. А на месте разработчиков стандартов, я бы еще сделал, чтоб и стили ко второму элементу с одинаковым id не применялись. Может быть тогда "умников" было поменьше.
1
3 / 3 / 0
Регистрация: 22.02.2010
Сообщений: 52
28.03.2014, 12:55  [ТС] 5
Спасибо, буду знать. Однако в моём случае события отрабатываются, хотя и я не могу понять почему только в том, случае когда написано $(document), а не скажем $("button[name=del_button]"). До сих пор не могу понять почему в исходном коде строчка добавляется т.к как и должно но в "Просмотр кода элемента" в Chrome отсутствуют <tr> и <input>.
0
3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170
28.03.2014, 13:15 6
DarkDiabolik, для начала, хорошо бы понять, что такое делегированная обработка событий (именно такой синтаксис вы и используете).
Javascript
1
2
3
$('.parent_static').on('event', '.child_dinamic', function(){
    // действие
});
.parent_static - родительский, статичный элемент. Лучше выбирать максимально ближний, а не body и уж тем более document.
.child_dinamic - дочерний элемент. Чаще всего применяют к динамически добавленным.
Цитата Сообщение от DarkDiabolik Посмотреть сообщение
почему в исходном коде строчка добавляется т.к как и должно но в "Просмотр кода элемента" в Chrome отсутствуют <tr> и <input>.
Вы что-то путаете. Динамически добавленный элемент не виден через "Просмотр кода страницы" (в FF "Исходный код страницы"), но виден через "Просмотр кода элемента" (в FF "Исследовать элемент").
1
3 / 3 / 0
Регистрация: 22.02.2010
Сообщений: 52
28.03.2014, 13:28  [ТС] 7
Первый снимок из "Просмотр кода элемента"(Обратите внимание на иерархию):
http://fotohost.kz/images/2014/03/28/waWdQ.png
Второй снимок Исходный код страницы (CTRL+U):
http://fotohost.kz/images/2014/03/28/PXI4z.png

Это скриншоты записи, которая добавилась через append.
0
3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170
28.03.2014, 13:35 8
Цитата Сообщение от DarkDiabolik Посмотреть сообщение
Первый снимок ....
Цитата Сообщение от DarkDiabolik Посмотреть сообщение
Второй снимок
Мне ваши "снимки" не нужны, т.к. я не рентгенолог. Покажите вашу реальную структуру HTML, и JS код, которые относятся к данной проблеме и не помешало бы сделать рабочий пример на jsfiddle.net. Тогда можно будет что-то решать.
0
3 / 3 / 0
Регистрация: 22.02.2010
Сообщений: 52
28.03.2014, 13:50  [ТС] 9
Проблема решена, прошу прощения. Она была со стороны php
PHP
1
echo '<tr><td style="display:none;"><input type="hidden" id="UID" value="'. $getLastID[0]-$countusers+1+$key .'"></td><td>'.$user.'@mail.com/td><td></td><td></td><td align="center"><button name="del_button" id="del_user">Лишить доступа</button></td></tr>';
В итоге почему-то в data выводилось только
HTML5
1
"></td><td>'.$user.'@mail.com/td><td></td><td></td><td align="center"><button name="del_button" id="del_user">Лишить доступа</button></td></tr>
Заменил на :
PHP
1
2
$value = $getLastID[0]-$countusers+1+$key;
echo '<tr><td style="display:none;"><input type="hidden" id="UID" value="'.$value.'"></td><td>'.$user.'@kazzinc.com</td><td></td><td></td><td align="center"><button name="del_button" id="del_user">Лишить доступа</button></td></tr>';
Однако понять почему себя так вела страница я не смог. Спасибо за потраченное время.
0
странник
810 / 481 / 108
Регистрация: 28.05.2012
Сообщений: 1,518
Записей в блоге: 2
28.03.2014, 16:21 10
вернемся к началу
Цитата Сообщение от DarkDiabolik Посмотреть сообщение
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).on("click", "button#del_user",function() {
currentid = $(this);
 var request = $.ajax({
   url : "****",
   type: "POST",
   data: {del_user : $(this).closest("tr").find("input").attr("value")},
   datatype:"html"
 });
  request.done(function(data) { 
  currentid.closest("tr").remove();  
 });
  request.fail(function(data) {
   alert("По неизвестной причине не удалось выполнить удаление;");
  });
  });
переменная currentid у вас объявляется в функции
Javascript
1
2
3
request.done(function(data) {
   currentid.closest("tr").remove();
 });
но эта переменная не является глобальной, поэтому браузер не понимал откуда брать её значение
надо было указать:
Javascript
1
var currentid = $(this);
0
28.03.2014, 16:21
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
28.03.2014, 16:21
Помогаю со студенческими работами здесь

Вызов функции через settimeout и document.writeln
Обращаюсь за помощью к спецам... Вот простейший пример который показывает проблему: &lt;!doctype...

Разница между document.body и document
Есть две разные строки для присвоения тегу &lt;h1&gt; текста:...

document.URL or document.location.href
есть документ из трёх фреймов. При загрузке второго фрейма (2) в первом фрейме (1) в поле 'log'...

Возможно-ли через document.getElementById найти адрес рисунка элемента
Здравствуйте. Если - нет, то как это можно сделать по другому?


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

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