Как добавить обработчик к кнопкам, когда они добавляются в следствии, например, ajax-запросов?
Disclaimer. Пытаюсь написать систему, позволяющую создавать формы (почти как google.forms). Цели - модуль интранет-системы, готовые варианты не подошли, гуглоформы также отпадают.
Написал некоторую базу, которая работает по следующей схеме:
Действие (добавить/удалить/изменить поле) -> Обновляем localstorage -> Рендерим в html с помощью lodash, и отправляем json на сервер. Суть в том, что когда мы добавляем новый html в DOM-дерево, там есть и кнопки. Как красиво и элегантно на них вешать обработчики?
Как сделать так, чтобы обработчики не стакались?
Сейчас работает так: с помощью jQuery при каждом рендере все кнопки подвергаются .off('click'), а затем сразу же .on('click', sendToJsonFunction);
Хотелось бы отказаться от jQuery и использовать addEventListener, но с removeEventListener, как я читал, есть проблемы: нужно по особому снимать уже навешенный ранее обработчик.
Спасибо! Я немножно переделал пример с сайта https://jsfiddle.net/8fy45zqf/2/ и хотелось бы узнать, а что делать, если нужен обработчики по keyup, onfocus, change на внутренних инпутах? Тоже можно вешать на родителя? В learn.javascript указано, что делегирование незначительно повышает нагрузку. Не будет ли проблем с событиями отличными от click?
Павел: Увы... Будут проблемы с событиями, что не всплывают, а например onfocus как раз таким и является. Вместо него есть некроссбраузерное focusin. Тут придется тогда на элемент вешать и самому контролировать удаление. В таком "спагетти" коде лучше уж юзать jquery, который хоть как то это контролирует.
Ну или учить нормальный MV* фреймворк и забыть о подгрузке html напрямую , как это делали в 2000-х. Все ровно за такой код по руках надают сейчас. Начните с backbone.
Павел: чуть не дочитал, html Вы рендерете на клиенте, но сути не меняет. Нужна прослойка которая вешает нужные события, и чистит после себя. Потому тут без MV* и ему подобным никак. Все эти задачи покрывает простейший backbone, так что не тратьте времени на поиск костыля.
Digital Brain: спасибо за подробный ответ! Я сейчас совершенствуюсь и думаю на себе испытать все сложности неиспользования умных штук вроде react, backbone, ember, angular, чтобы лучше понимать, чем же они все же упрощают жизнить и лучше понимать как что они заменяют.
В текущую задачу все равно не получится Backbone ставить, иначе вообще возникнет жуткий зоопарк технологий.
Павел: как раз backbone легко вставить, он очень простой, проще уже быть не может, минимальная реализация, можно просто отдельные части юзать типа вид. Смысл писать тоже самое, но корявое, что и у backbone' нет. Ну а остальные жирные конечно, просто так в проект их не вставить. Ну разве что react еще можно, но опять же жирный он.
