История такая. Разметка лежит в php файле, который инклюдит еще один файл. Код (Text): <div id="table-container"> <table id="select-table"> <tbody> <?php include 'dynamic_content.php' ?> </tbody> </table> </div> <div id="main-content-left"></div> Этот dynamic_content берет из MySQL данные и выводил их в таблицу. Это все работает и все здорово. Вставка происходит следующим образом: Код (Text): while($data = $result->fetch()) { echo " <tr id=\"id_patient\"> <td>".$data['firstName']."</td> <td>".$data['secondName']."</td> <td>".$data['address']."</td> <td>".$data['passport']."</td> <td>".$data['diagnosisIn']."</td> <td>".$data['dateIn']."</td> <td>".$data['id_ward']."</td> <td><input type=\"button\" value=\"Редактировать\" class=\"button\" /></td> </tr> "; } Как видите, добавляется в каждой последней колонке инпут вида кнопки. В плане функционала все мне тут нравится. Таблица динамически меняется с помощью ajax когда пользователь меняет отделение в select-е (см скрин). И вот проблема. По клику на "редактирование" должно происходить редактирование с написанное на JS (это я напишу), но скрипт не распознает это нажатие, то есть я тыкаю на инпуты, а он не понимает. В чем может быть проблема, перепробовал все возможные варианты, но бестолку? Предварительный код: Код (Text): $(document).ready(function() { $('input.button').click(function() { alert("Hello!"); } });
В таких случаях используется делегированная обработка событий. Т.е. обработчик устанавливается не на сам элемент, а на какой-нибудь его родительский статичный элемент. В принципе, это может быть даже document Код (Javascript): $(document).on('click', 'input.button', function(){ // ... });
Спасибо! А с чем связано то, что мой вариант не работает и в чем конкретно отличия? Хочется суть проблемы понять
В общем-то, тут всё просто. JS работает с теми элементами, на которые ему конкретно указали. То есть, в jQuery вы устанавливаете обработчик, указав какой-то селектор, но "за кулисами" в самой библиотеке, работает нативный JS, а значит событие устанавливается на каждый элемент отдельно: Код (Javascript): // код jQuery $('.some_class').on('click', foo); // Как отрабатывает в библиотеке (примерно) [].forEach.call(document.querySelectorAll('.some_class'), function(el){ el.addEventListener('click', foo); }); Пробегаемся в цикле по элементам с классом "some_class" и на каждый отдельно устанавливаем обработчик. Если в DOM динамически появляется какой-то еще элемент, пусть и с таким же классом, то на него обработчик не устанавливался. Делегированная обработка работает по другому принципу, за счет "всплытия событий" (bubbling): установили обработчик на статичный родительский элемент, а в callback-функции проверяем на каком именно элементе сработало событие. Если, как в примере выше, у этого элемента есть класс "some_class", то всё гуд, выполняем какое-то действие.
То есть получается так: браузер загрузил страницу, сразу поставил на каждый мой элемент обработчик, а потом когда аякс меняет мне дом, добавляя новые элементы - на них обработчик не встал? А в вашем пример за счёт того, что обработчик стоит на родителе, то по сути он обрабатывает клик на родитель, а тот уже определяет конкретику на ребёнке?
Получается... если не вдаваться в подробности и терминологию. --- Добавлено --- Для лучшего понимания, маленький пример
Получается, что прежде, чем пилить что-то сложнее автопрокрутки, с использованием JQuery, надо сначала изучить JavaScript как он есть.