Как вызывать события подгруженных компонентов из ajax?

@IntegralAL · Регистрация: 26.07.2013

Студворк — интернет-сервис помощи студентам

Добрый день! Обрисую ситуацию. У меня есть страница index.html в ней javascript код и пустая таблица с именем html-data-table. Есть еще файл select.php в котором происходит выборка записей из таблицы mysql и формирование таблицы с полями текстовыми и input элементами (текстовые и checkbox's). Через ajax запрос на странице index.html идет обращение к Select.php файлу, загрузка данных в нтмл.

Вот содержимое файла select.php:

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
  <caption>
        Товары
        </caption>
        <tr>
          <th >Номер товара</th>
          <th>Название</th>
          <th>Редактирование</th>
        </tr> 
<?php
    include('config.php');
 
    // достаем из базы данных ID и заголовок всех статей
    $result = $connect->query("select article_id, article_title from article ORDER BY article_title");
    //определяем количество полученных записей
    $colResult = $result->num_rows;
 
    if($colResult > 0)
    {
       for($i = 0; $i < $colResult; $i++)
       {
          $row = $result->fetch_object();
          echo"<tr>";
          echo "<td>".$row->article_id."</td>";
          echo "<td><span name='text_title[".$row->article_id."]'>".$row->article_title."</span>
          <input type='text' name='edit_title[".$row->article_id."]' value='".$row->article_title."' style='display:none'></td>";
          echo "<td><center><input type='checkbox' name='check_button' value='".$row->article_id."'></center></td>";
          echo "</tr>"; 
        }
    }   
?>

А вот содержимое файла index.php:

HTML5
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
<html>
<head>
<title>Сайтик</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( 
    function() 
    {
 
     //функция динамического вывода данных в таблице
     function Createtable()
     {
        $.ajax(
               {type: 'POST', 
                url: 'select.php', 
                success: function(response)
                 {
                   $('#html-data-table').html(response);
                 }
                } 
               );
        }
       
       // нажатие ческбоксов
       $('input[name=check_button]').change( 
       function () 
       { 
           alert('Мы нажали на один из ческбоксов'); 
        });
       ...
 }
);
 
</script>
</head>
<body>
<div id="wrap">
...
<table border="0" cellspacing="0" cellpadding="0" id="html-data-table">
 
</table>
<input type="button" name="editArticle" value="Изменить выделенные товары">
<input type="button" name="deleteArticle" value="Удалить выделенные товары"><br>
</div>

Так вот функция отказывается работать $('input[name=check_button]').change в то время как до использования ajax (когда в этой же странице -index.php формировались теги и данные таблицы) все это работало. В чем может быть проблема? Помогите, кто хорошо знает природу Ajax, jquery и js.

@resource2008 · 23.11.2013, 06:30

проблема в том, что элементы страницы обновились (насколько я понял), и для скриптов это фактически новые чекбоксы, а обработчик назначен старым, которые ~~канули в небытие~~ были удлены со страницы.

посмотрите описания методов названичения обработчиков событий с использованием delegate и on (в документации на оф сайте есть описание и примеры).

Новые блоги и статьи Все статьи Все блоги /
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 . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@resource2008 111 / 112 / 18 Регистрация: 11.03.2011 Сообщений: 421
	23.11.2013, 06:30
	проблема в том, что элементы страницы обновились (насколько я понял), и для скриптов это фактически новые чекбоксы, а обработчик назначен старым, которые ~~канули в небытие~~ были удлены со страницы. посмотрите описания методов названичения обработчиков событий с использованием delegate и on (в документации на оф сайте есть описание и примеры). 0