Как применить класс к динамическим элементам?

Question

[TheNopeSir]

Необходимо зачеркнуть span с текстом, даже если он добавлен динамически (т.е. его еще не существует, будет добавлен позже). Я написал код, но стиль "набрасывается" на все спан элементы с таким классом. Точно так же работает снятие класса (removeClass). Как сделать так, чтобы стиль распространялся только на один span за одно нажатие? (зачеркивался по одному клику и сбрасывал стиль только один элемент и не распространялся по DOM дереву)
Код: https://codepen.io/thekeksir/pen/KOgJKb

Answer 1

[FeST1VaL]

Немного переделал ваш код.

$('ul').on('click', ".text", function(){
	$(this).addClass('line');
});

$('ul').on('dblclick',".text.line", function(){
	$(this).removeClass('line');
});

Comments

[TheNopeSir]

Спасибо Вам большое. На такой мелочи затерялся. Я еще поменял addClass и removeClass на toggleClass.

[TheNopeSir]

А если я захочу добавить такое же поведение на input type="checkbox", будет ли работать такое поведение на span? Артем Будин

[FeST1VaL]

TheNopeSir, я не понимаю что именно вы хотите))) песочницу закиньте) я посмотрю) У вас по сути просто была проблема с выбором селектора кому давать класс и забирать)

[TheNopeSir]

Артем Будин, отчасти решил проблему. Я просто добавил чекбокс внутрь span. Но это работает при клике как на содержимое span, так и на checkbox, но может у вас найдется нормальное решение. @FeST1VaL
Код: https://codepen.io/thekeksir/pen/KOgJKb

[FeST1VaL]

TheNopeSir, так просто не понятно что именно вы хотите) сейчас у вас просто по классу .text ставится класс с зачеркиванием, вы все тоже самое хотите, только переместить input в другое место и по клику на него зачеркивать?

Я именно не могу понять что именно вы хотите в итоге получить)

Сейчас вы кликаете не по инпуту и спан, а по классу text, т.е даже если вы между ними тыкните, все равно сработает)

[TheNopeSir]

Артем Будин, да, как вы и сказали, если бы я переместил чекбокс, он бы зачеркивал span, к которому он относится (т.е не любой .text, а так же, как он работает в примере выше)

[FeST1VaL]

TheNopeSir, ну тут зависит куда вы перенесете свой checkbox или обращаться напрямую к тексту по id который вы получите из нажатого input)

[TheNopeSir]

Артем Будин, то есть, если я перенесу input вверх под DOM дереву, то мне нужно лишь правильно указать вложенность? Или как я могу обратиться по сгенерированому id, разве они не будут одинаковыми?

[FeST1VaL]

TheNopeSir, ну например сделать у text id="text_2", а у input data-id=2, берем у инпута через var id = $(this).attr('data-id');и ищем $('#text_'+id);

[TheNopeSir]

Артем Будин, спасибо, попробую.