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

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

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

Студворк — интернет-сервис помощи студентам
Здравствуйте, проблема следующая.
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
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
28.03.2014, 10:17
Ответы с готовыми решениями:

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

Разница между document.querySelectorAll() и document.body.getElementByClassNam()
И document.querySelectorAll(&quot;selector&quot;) и document.body.getElementsByClassNam(&quot;selector&quot;) возвращают массив найденных элементов по...

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

9
 Аватар для Lazy_Den
3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170
28.03.2014, 10:31
Цитата Сообщение от 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  [ТС]
JavaScript
1
$("button#del_user").click
Никто не отменял, но работать с динамическим контентом он не будет.
Про $(this) ничего сказать не могу, но event.target хотя бы отрабатывает.

Добавлено через 7 минут
Хоть и принято за стандарт id должен быть уникальным, но ни разу не натыкался, на то что повторение являлось какой-то проблемой.
0
 Аватар для Lazy_Den
3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170
28.03.2014, 12:30
Цитата Сообщение от 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  [ТС]
Спасибо, буду знать. Однако в моём случае события отрабатываются, хотя и я не могу понять почему только в том, случае когда написано $(document), а не скажем $("button[name=del_button]"). До сих пор не могу понять почему в исходном коде строчка добавляется т.к как и должно но в "Просмотр кода элемента" в Chrome отсутствуют <tr> и <input>.
0
 Аватар для Lazy_Den
3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170
28.03.2014, 13:15
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  [ТС]
Первый снимок из "Просмотр кода элемента"(Обратите внимание на иерархию):
http://fotohost.kz/images/2014/03/28/waWdQ.png
Второй снимок Исходный код страницы (CTRL+U):
http://fotohost.kz/images/2014/03/28/PXI4z.png

Это скриншоты записи, которая добавилась через append.
0
 Аватар для Lazy_Den
3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170
28.03.2014, 13:35
Цитата Сообщение от DarkDiabolik Посмотреть сообщение
Первый снимок ....
Цитата Сообщение от DarkDiabolik Посмотреть сообщение
Второй снимок
Мне ваши "снимки" не нужны, т.к. я не рентгенолог. Покажите вашу реальную структуру HTML, и JS код, которые относятся к данной проблеме и не помешало бы сделать рабочий пример на jsfiddle.net. Тогда можно будет что-то решать.
0
3 / 3 / 0
Регистрация: 22.02.2010
Сообщений: 52
28.03.2014, 13:50  [ТС]
Проблема решена, прошу прощения. Она была со стороны 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
странник
 Аватар для Donald28
810 / 481 / 108
Регистрация: 28.05.2012
Сообщений: 1,518
Записей в блоге: 2
28.03.2014, 16:21
вернемся к началу
Цитата Сообщение от 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
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
28.03.2014, 16:21
Помогаю со студенческими работами здесь

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

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

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

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

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


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

Или воспользуйтесь поиском по форуму:
10
Ответ Создать тему
Новые блоги и статьи
изучаю kubernetes
lagorue 13.01.2026
А пригодятся-ли мне знания kubernetes в России?
сукцессия микоризы: основная теория в виде двух уравнений.
anaschu 11.01.2026
https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11
Jel 10.01.2026
WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11
Jel 10.01.2026
Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает?
Neotwalker 09.01.2026
В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
Модель микоризы: классовый агентный подход 3
anaschu 06.01.2026
aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114
Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR
ФедосеевПавел 06.01.2026
Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .
Модель микоризы: классовый агентный подход 2
anaschu 06.01.2026
репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru