Javascript jQuery中的嵌套函数

我不熟悉javascript和jQuery。我正在编写以下代码来编辑我的网页的一部分。当我第一次单击“编辑”案例时，它工作得非常好，但单击“取消”后，它会返回我。“编辑”案例不起作用。。这段代码有什么问题

$("#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);

    });
});

$（“#编辑_案例”）。单击（函数（）{
var oldHTML=$（“#可编辑”）.html（）；
var-newHTML；
newHTML=“”
$（“#可编辑”）.html（newHTML）；
$（'#footer bottons'）.html（'Save Cancel'）；
$（“#取消”）。单击（函数（）{
$（“#可编辑”）.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>

下拉代码
编辑

面板主体代码。。。
面板页脚

---

单击“编辑”时，将显示与stackoverflow.com上相同的文本输入字段。第一次，编辑链接可以正常工作，但当我取消编辑时，编辑和删除都不起作用。我认为click事件没有发生，因为我也尝试过使用alert（“测试”）对其进行检查，并且在单击“取消”后它没有出现。这是解除绑定事件的问题吗？如果是，我将如何更正它？

运行一次后，新html的变量值为“oldHtml”。您需要将旧的HTML存储在此功能之外，以便保留它

以下是您现在正在执行的流程：

获取html

加载新的html

获取html（现在是新的html）

加载旧html（仍然是新的html）

---

每次调用此函数时，oldHtml都会被覆盖和存储。

运行一次后，新html的变量值为“oldHtml”。您需要将旧的HTML存储在此功能之外，以便保留它

以下是您现在正在执行的流程：

获取html

加载新的html

获取html（现在是新的html）

加载旧html（仍然是新的html）

---

每次调用此函数时，oldHtml都会被覆盖和存储。

运行一次后，新html的变量值为“oldHtml”。您需要将旧的HTML存储在此功能之外，以便保留它

以下是您现在正在执行的流程：

获取html

加载新的html

获取html（现在是新的html）

加载旧html（仍然是新的html）

---

每次调用此函数时，oldHtml都会被覆盖和存储。

运行一次后，新html的变量值为“oldHtml”。您需要将旧的HTML存储在此功能之外，以便保留它

以下是您现在正在执行的流程：

获取html

加载新的html

获取html（现在是新的html）

加载旧html（仍然是新的html）

---

每次调用此函数时，oldHtml都会被覆盖和存储。

由于取消按钮最初不在dom中，而且您要删除编辑案例，因此需要使用“.on”将此代码放入加载中，而不是单击事件中。如果将其放入click事件中，将有多个要注册的事件

使用工作小提琴：

$（文档）。在（'click'，'#cancel'，function（）{
$（“#可编辑”）.html（oldHTML）；
});
var oldHTML=$（“#可编辑”）.html（）；
$（文档）。在（'单击'，'编辑案例'，函数（）{
var oldHTML=$（“#可编辑”）.html（）；
var-newHTML；
newHTML=“”
$（“#可编辑”）.html（newHTML）；
$（'#footer bottons'）.html（'Save Cancel'）；
});

由于“取消”按钮起初不在dom中，而且您正在删除“编辑”案例，因此需要使用“.on”将此代码放入加载，而不是单击事件中。如果将其放入click事件中，将有多个要注册的事件

使用工作小提琴：

$（文档）。在（'click'，'#cancel'，function（）{
$（“#可编辑”）.html（oldHTML）；
});
var oldHTML=$（“#可编辑”）.html（）；
$（文档）。在（'单击'，'编辑案例'，函数（）{
var oldHTML=$（“#可编辑”）.html（）；
var-newHTML；
newHTML=“”
$（“#可编辑”）.html（newHTML）；
$（'#footer bottons'）.html（'Save Cancel'）；
});

由于“取消”按钮起初不在dom中，而且您正在删除“编辑”案例，因此需要使用“.on”将此代码放入加载，而不是单击事件中。如果将其放入click事件中，将有多个要注册的事件

使用工作小提琴：

$（文档）。在（'click'，'#cancel'，function（）{
$（“#可编辑”）.html（oldHTML）；
});
var oldHTML=$（“#可编辑”）.html（）；
$（文档）。在（'单击'，'编辑案例'，函数（）{
var oldHTML=$（“#可编辑”）.html（）；
var-newHTML；
newHTML=“”
$（“#可编辑”）.html（newHTML）；
$（'#footer bottons'）.html（'Save Cancel'）；
});

由于“取消”按钮起初不在dom中，而且您正在删除“编辑”案例，因此需要使用“.on”将此代码放入加载，而不是单击事件中。如果将其放入click事件中，将有多个要注册的事件

使用工作小提琴：

$（文档）。在（'click'，'#cancel'，function（）{
$（“#可编辑”）.html（oldHTML）；
});
var oldHTML=$（“#可编辑”）.html（）；
$（文档）。在（'单击'，'编辑案例'，函数（）{
var oldHTML=$（“#可编辑”）.html（）；
var-newHTML；
newHTML=“”
$（“#可编辑”）.html（newHTML）；
$（'#footer bottons'）.html（'Save Cancel'）；
});

单击“取消”按钮后，是否仍存在id为edit_case的元素？这是什么意思：“这将使我从字段中返回”。此外，“编辑”案例不起作用……这段代码有什么问题？”您还没有告诉我们它应该做什么，所以我们很难告诉您它有什么问题。谢谢您的评论。。。我已经添加了更多细节。@HassanSaqib我的答案已经更新。干杯单击“取消”按钮后，是否仍存在id为edit_case的元素？这是什么意思：“它将我从字段中返回”。此外，“编辑

$(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>');

});