Как закрепить добавленый элемент?

Question

[zeni1agent]

Я с помощью кнопки добавляю html

function add(){
  //Генепация html
  var html = '<div class="but">TEST</div><div class="content">bff</div>';
  // Сохранение кода
  $('#cont').append(html);
  $('#cont2').val($('#cont').html());
  // Действие для каждого добавленного элемента
  $( "body" ).on('click', '.but', function(e) {
    $('.content').css('color','red');
  });
}
// Добавление html кода по нажатию на кнопку
$( "body" ).on('click', '#click_but', function(e) {
  add();
});
// Кнопка для демонстрации вывода html из БД нажать перед
// Для понимания проблемы нажать на нее перед #click_but а потом на .but
$( "body" ).on('click', '#show', function(e) {
  var val = $('#cont2').val()
  $('#cont').html(val);
});

Но проблема в том что событие 'click', '.but', срабатывает на все элементы. как назначить событие на каждый элемент отдельно?
Использовать $(this) .parent() .child() .after() .before(). Не имеет смысла так как если я изменю положение элементов в var html то все придется переделывать.
И как сохранить в textarea весь html код так что бы при воспроизведении его js все еще работал.

Answer 1

[lUser L]

https://codepen.io/5h4dy_s/pen/XWKBOvx?editors=1011

Использовать $(this) .parent() .child() .after() .before(). Не имеет смысла так как если я изменю положение элементов в var html то все придется переделывать.

Не придётся, если изначально задать этим элементам родитель и ссылаться на него через closest('.parent');

И как сохранить в textarea весь html код так что бы при воспроизведении его js все еще работал.

- не понял

ps

Лучше дополни вопрос, напиши что ты хочешь сделать, а то твой код выглядит просто ужасно.

Что за курсы и кто вас учит использовать id там где нужно использовать классы и наоборот ? Периодически вижу такое.

Comments

[zeni1agent]

- не понял

Я имею в веду что сохраняю весь html код из textarea в бд. А потом возвращаю его обратно на страницу.
единственные идеи что у меня есть это просто сделать так

var html = '<div class="but">TEST</div><div class="content">bff</div><script type="text/javascript">$( "body" ).on("click", ".but", function(e) {$(".content").css("color","red");});</script>';

Для тестов я просто добавил кнопку show. достаточно нажать на нее не нажимая click_but

Лучше дополни вопрос, напиши что ты хочешь сделать, а то твой код выглядит просто ужасно.

Извиняюсь писал торопясь.

Что за курсы и кто вас учит использовать id там где нужно использовать классы и наоборот ? Периодически вижу такое.

К сожалению у меня нет денег на курсы. Не на наем фрилансеров. Есть только идеи которые я хотел бы воплотить. Повторюсь писал торопясь.

Answer 2

[Александр Черемхин]

// только на элемент с id=“click_but“
$( "#click_but”).on(“сlick”,  function(e) {  
       add();
})