jQuery 中的嵌套函数

Question

我是 javascript 和 jQuery 的新手。我正在编写以下代码来编辑我的网页的一部分。当我第一次点击#edit_case 但在点击#cancel 后 returns 我回来时，它工作完美。 #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>

当我单击“编辑”时，会出现与 whosebug.com 上相同的文本输入字段。第一次，Edit link 工作正常，但是当我取消 Edit 时，Edit 和 Delete 都不起作用。我认为点击事件没有发生，因为我也尝试使用 alert('test') 对其进行检查，并且在点击#cancel 后它没有出现。这是解除绑定事件的问题吗？如果是，我该如何纠正？

Answer 1

在运行它一次之后，新的html在"oldHtml"的变量值中。您需要在此功能之外存储旧的 HTML，因此它会被保留。

这是您现在正在执行的过程：

得到html.
加载新的 html。
获取html（现在是新的html）。
加载旧的 Html（仍然是新的 html）。

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

Answer 2

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

正在工作fiddle： 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>');

});

jQuery 中的嵌套函数

Nested function in jQuery

javascript

jquery

nested-function