Почему не работает функция после изменения кода с помощью html()?

Question

[YehorMov]

У меня есть некий код который при нажатии на <span class="value"> меняет html и при нажатии на кнопку меняет его на предыдущий, однако функции click() срабатывает лишь один раз (то есть вторая функция $(".edit-button").click() уже не будет срабатывать)

$(".value").click(function(){
    prev=$(this).parent().html();
    $(this).parent().html('<input type="button" name="save" value="Сохранить" class="edit-button">');
    $(".edit-input").focus();
})
$(".edit-button").click(function(){
        $(this).parent().html(prev);
        $('.edit').css('display', 'none');
})

Comments

[Beliyadm]

$(document).on('click', ".edit-button", function() {

Вместо
$(".edit-button").click(function(){

Аналогично и для первого клика, чтобы бесконечно срабатывало

https://codepen.io/beliyadm/pen/YzYzGRJ

Answer 1

[Антон Шаманов]

$(".edit-button").click(..) добавляет событие для существующих кнопок с классом .edit-button

$('body').on('click', '.edit-button', function (event) {});

обработчик вешается на "body", но коллбэк срабатывает только при нажатии ".edit-button" поэтому такой вариант будет работать и как для существующих кнопок, так и для добавляемых, главное чтобы "body" или "html" теги не были заменены, т.к. при этом удаляются события которые на них висят

переменная prev будет доступна в обеих функциях только при условии что она объявляется в родительской области видимость.
как вариант ты можешь добавлять событие в $(".value").click() для новой кнопки $(".edit-button").click()

const $parent = $(this).parent(),
          prev = $parent.html(),
          $button = $('<input type="button" name="save" value="Сохранить" class="edit-button">');
$button.click(function(){
        $parent.html(prev);
        $('.edit').hide();
});
$parent.html($button);