Вложенные функции в JQuery

Question

Я новичок в Javascript и JQuery. Я пишу следующий код для редактирования части моей веб-страницы. Он работает идеально, когда я нажимаю на #edit_case в первый раз, но после нажатия кнопки #cancel, которая возвращает меня обратно. #edit_case не работает. Что не так с этим фрагментом кода?

$("#edit_case").click(function(){ 

    var oldHTML = $("#editable").html(); 
    var newHTML; 

    newHTML = "<div class='panel-body' id='edit_fields'></div> <div class='panel-footer' id='footer-bottons'></div>" 
    $("#editable").html(newHTML); 
    $('#footer-bottons').html('<div class="text-right"><button class="btn btn-primary btn-sm" id="save">Save</button> <button class="btn btn-default btn-sm" id="cancel">Cancel</button></div>'); 

    $("#cancel").click(function(){ 

     $("#editable").html(oldHTML); 

    }); 
}); 

Мой HTML разметка как:

<div class="panel panel-default" id="editable"> 
    <div class="panel-body"> 
     Drop-down code 
     <li><a id='edit_case'>Edit</a><li> 

     Panel-Body Code... 

    </div> 
Panel footer 
</div> 

При нажатии на Edit, те же текстовые поля ввода появляются как на stackoverflow.com. В первый раз ссылка редактирования работает нормально, но когда я отменю Edit, Edit и Delete не работают. Я думаю, что событие click не происходит, так как я также попробовал проверить его, используя alert ('test'), и он не появился после нажатия на #cancel. Это проблема развязывания события? Если да, то как бы исправить это?

Answer 1

так как кнопка отмены не была в dom сначала, а так как вы удаляете edit_case, вам нужно сделать это с помощью «.on», чтобы этот код был загружен, а не в событии click. если вы поместите его в событие click, у вас будет несколько событий, которые будут зарегистрированы.

с рабочей скрипкой: https://jsfiddle.net/2hjr6g94/

$(document).on('click','#cancel',function(){ 
     $("#editable").html(oldHTML); 
    }); 

var oldHTML = $("#editable").html(); 

$(document).on('click','#edit_case',function(){ 
    var oldHTML = $("#editable").html(); 
    var newHTML; 

    newHTML = "<div class='panel-body' id='edit_fields'></div> <div class='panel-footer' id='footer-bottons'></div>" 
    $("#editable").html(newHTML); 
    $('#footer-bottons').html('<div class="text-right"><button class="btn btn-primary btn-sm" id="save">Save</button> <button class="btn btn-default btn-sm" id="cancel">Cancel</button></div>'); 

}); 

Answer 2

После запуска один раз новый html находится в переменной значения «oldHtml». Вам нужно хранить старый HTML вне этой функции, поэтому он сохраняется.

Вот процесс вы делаете прямо сейчас:

1. Получить HTML.
2. Загрузить новый html.
3. Получить html (теперь новый html).
4. load старыйHtml (все еще новый html).

oldHtml получает переопределение и сохраняется каждый раз, когда вызывается эта функция.