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

Question

[Кирилл Горелов]

Парни, привет.
Такая задача.
Как можно переинициализировать dom дерево?
Набросал скрипт https://jsfiddle.net/fyq4mpn7/
Суть в том, что у меня все должно показываться динамический на странице. Привел пример как это у меня сейчас сделано.
У меня есть кнопка которая показывает поле input и к ней кнопка, которая должна увеличить число. Но так как кнопку и поле я вывожу методом append, это не срабатывает. Как мне переделать это скрипт, что бы он работал?

Answer 1

[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);
}

Answer 2

[Антон]

$(document).on('click','.two',function(){

Answer 3

[Alex]

переинициализировать 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                               // не делать ничего
    }
    /* Полезная логика */
 })

Comments

[Кирилл Горелов]

Alex Антон twobomb
Кстати, парни, все можно было сделать еще проще, как оказалось, это использовать не jquery, а нативный JS.
Но в любом случае спасибо!))

[twobomb]

Кирилл Горелов, нативный js проще чем jquery o_O

[Кирилл Горелов]

twobomb, нет)))
Я имел ввиду конкретно мою задачу.