Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.71/7: Рейтинг темы: голосов - 7, средняя оценка - 4.71
 Аватар для Amadara
21 / 21 / 5
Регистрация: 17.12.2014
Сообщений: 322

События для динамически создаваемых кнопок

02.10.2018, 22:53. Показов 1516. Ответов 2
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
У меня есть таблица, в ней есть пункт "дествие", там кнопка для удаления.
При выборе селектора со странами, данные таблицы обновляются, вместе с кнопками

Как привязать событие на кнопку удаления?


HTML5
1
2
3
4
5
    <form id="mainTableResource" method="post" action="@Url.Action()">
 
 
             <button type="button" name="deleteButton_@item.Id" value="@item.Id" class="deleteLineButton">Delete</button>
    </form>
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$("#resourceTable").on("click", $(".deleteLineButton"), function () {
    var that = $(this);
    $.ajax({
        type: "GET",
        url: ,
        data: {
 
 
        },
        success: function (data, textStatus) {
            console.log(textStatus);
 
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.error(xhr);
            console.error(ajaxOptions);
            console.error(thrownError);
        }
    });
});
0
Лучшие ответы (1)
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
02.10.2018, 22:53
Ответы с готовыми решениями:

Маска ввода для динамически создаваемых полей
Добрый день, уважаемые формучане! Возникла следующая проблема: для определения масок ввода использую jquery.maskedinput.js. Все...

Данные динамически создаваемых полей не отправляются формой
Здравствуйте! Попробовал задать вопрос в похожей теме, видимо, не заметили и ответа нет. Поэтому попробую так. Есть форма, некоторые...

События для динамически добавленных элементов
Всем доброго дня (ночи, утра, вечера). Столкнулся с такой проблемой, имеется функция выполняющая ajax запрос и возвращающая несколько...

2
 Аватар для EveKS
601 / 485 / 185
Регистрация: 19.04.2016
Сообщений: 1,885
03.10.2018, 06:18
Лучший ответ Сообщение было отмечено Amadara как решение

Решение

Если .deleteLineButton лежит в #resourceTable и #resourceTable не пересоздается, то
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$("#resourceTable").on("click", ".deleteLineButton", function () {
    var that = $(this);
    $.ajax({
        type: "GET",
        url: ,
        data: {
 
 
        },
        success: function (data, textStatus) {
            console.log(textStatus);
 
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.error(xhr);
            console.error(ajaxOptions);
            console.error(thrownError);
        }
    });
});
Если все же подменяется, то
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(document).on("click", "#resourceTable .deleteLineButton", function () {
    var that = $(this);
    $.ajax({
        type: "GET",
        url: ,
        data: {
 
 
        },
        success: function (data, textStatus) {
            console.log(textStatus);
 
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.error(xhr);
            console.error(ajaxOptions);
            console.error(thrownError);
        }
    });
});
Или в момент создания кнопки:

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
function createBtn() {
    let $btn = $('<button>');
 
   $btn.on('click', function() {
      clickFunction ($(this));
   });
 
   // todo
}
 
function clickFunction ($that ) {
    $.ajax({
        type: "GET",
        url: ,
        data: {
 
 
        },
        success: function (data, textStatus) {
            console.log(textStatus);
 
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.error(xhr);
            console.error(ajaxOptions);
            console.error(thrownError);
        }
    });
}
1
 Аватар для Amadara
21 / 21 / 5
Регистрация: 17.12.2014
Сообщений: 322
03.10.2018, 20:06  [ТС]
Спасибо.
Я понял свою ошибку
Div, в нем таблица, в таблице кнопки
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$('#rootMainTable').on('click', '.deleteLineButton', $(this), function (e) {
    var that = $(this);
    $.ajax({
        type: 'GET',
        url: urlControlDeleteMethod,
        data: {
            Id: 1,
            IdDeleteElement: that.val()
 
        },
        success: function (data, textStatus) {
            console.log(textStatus);
            location.reload();
 
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.error(xhr);
            console.error(ajaxOptions);
            console.error(thrownError);
        }
    });
});
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
03.10.2018, 20:06
Помогаю со студенческими работами здесь

Datepicker для динамически создаваемых input
У меня скрипт который создает древо в виде инпутов, они создаются соответственно динамически. Сколько я не пробовал календарей, и на jquery...

Организовать подсчет динамически создаваемых элементов
Доброго времени суток, ранее в теме &quot;Помогите с непростой для меня задачей&quot; я разбирался с добавлением элементов страницы в заданное место...

События для динамически создаваемых кнопок
Всем привет. Подскажите, как обработать события на динамически создаваемые кнопки. Тут...

Обработка динамически создаваемых кнопок
Всем доброго дня. Пожалуйста, киньте ссылкой или подскажите, куда копать. Есть динамически создаваемая таблица, в каждой строке...

Название создаваемых динамически событий кнопок
Здравствуйте, я пишу сапера на C# Я создаю все кнопки динамически с помощью 2х циклов for (int j = 0; j &lt; 9;...


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

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Новые блоги и статьи
Символьное дифференцирование
igorrr37 13.02.2026
/ * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .
Камера Toupcam IUA500KMA
Eddy_Em 12.02.2026
Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу
zbw 12.02.2026
И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила»
zbw 12.02.2026
«Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 12.02.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 11.02.2026
Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image
8Observer8 10.02.2026
Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .
Установка Qt-версии Lazarus IDE в Debian Trixie Xfce
volvo 10.02.2026
В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru