javascript - Jquery:切换不工作

Question

我有一个像这样的 HTML 页面结构:

<div class="editable>CONTENT
    <span class="multiple-users">span-content</span>
    <span class="multiple-users">span-content2</span>
    <span class="multiple-users">span-content3</span>
</span>

当我单击具有“多用户”类的跨度元素时，我希望它用单击的跨度的内容替换“可编辑”类的 div 中的所有内容。当我点击被点击跨度的内容时，我希望它恢复到原来的形式，用原来在 div 中的所有内容替换它。

这是我的:

$(document).ready(function () {
    $('span.multiple-users').click(function () {
        var id = $(this).text().match(/[0-9]+/);
        var old_html = $(this).closest('div.editable').html();
        var instructor_obj = $(this).closest('div.editable');

        instructor_obj.html("<span id=" + id + " >Instructor ID: " + id + "</span>");

        $('#' + id).click(function () {
            $(this).closest('div.editable').html(old_html);
        });    
    });
}); 

但这并不完全符合我的要求。当我单击 class="multiple-users"的范围时，它会用 span-content 替换 div 中的所有内容，当我单击 span-content 时，它会恢复为原始内容。但是，当我尝试再次单击 span 时，它不会用单击的 span 的内容替换 div 中的所有内容。

简而言之，它没有正确切换。你能看出我的代码有什么问题吗？

Answer 1

您需要委派事件，因为您正在动态地创建新元素。当您单击 span 元素时，事件将绑定(bind)到已销毁的旧元素，但不会绑定(bind)到新元素。

$('.editable').on('click', 'span.multiple-users', function () {

Check Fiddle