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>

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

Answer 1

由于取消按钮最初不在 dom 中，并且由于您要删除 edit_case，因此您需要使用“.on”将此代码放入加载中，而不是单击事件中。如果你把它放在点击事件中，你将有多个事件将被注册。

使用工作小提琴： 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. 加载 oldHtml（还是新的 html）。

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