@Kirill-Gorelov
С ума с IT

Переинициализация dom дерева?

Парни, привет.
Такая задача.
Как можно переинициализировать dom дерево?
Набросал скрипт https://jsfiddle.net/fyq4mpn7/
Суть в том, что у меня все должно показываться динамический на странице. Привел пример как это у меня сейчас сделано.
У меня есть кнопка которая показывает поле input и к ней кнопка, которая должна увеличить число. Но так как кнопку и поле я вывожу методом append, это не срабатывает. Как мне переделать это скрипт, что бы он работал?
  • Вопрос задан
  • 64 просмотра
Решения вопроса 3
twobomb
@twobomb
$('.one').click(function(){
	$btn = $('<button type="button" class="two">Увеличить</button>');
	$('.forInput').append($btn);
$btn.click(clickHandler);
	$('.forInput').append('<input type="text" class="inputone" data-price="1000">');
});


function clickHandler(){
	let new_price = parseInt($(this).next().attr('data-price')) + 100;
   $(this).next().attr('data-price', new_price);
   $(this).next().val(new_price);
}
Ответ написан
Kozack
@Kozack Куратор тега JavaScript
переинициализировать dom дерево
Вот такого я ещё не слышал :)

Если коротко, то тут два варианта:

При добавлении кнопки повесить на неё обработчик событий (ответ twobomb).
const button = document.createElement('button') // Создаём кнопку
button.addEventListener('click', () => { /* ... */ }) // Вешаем обработчик
document.appendChild(button)  // Добавляем кнопку в дерево


Повесить один обработчик на контейнер и в нем проверять event.target (ответ Антон)
const container = document.querySelector('#container') // Контейнер в котором будут добавляться элементы
container.addEventListener('click', (event) => { // Вешаем обработчик
    if (!event.target.matches('button')) { // Если клик куда угодно но не в кнопку
      return                               // не делать ничего
    }
    /* Полезная логика */
 })
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы