如何恢复已移除元素上的jQuery事件？个人简介编辑场景求助

这个问题的核心是事件绑定的作用范围——你一开始把事件直接绑定到初始的#user_bio元素上，但当你移除这个元素再重新添加时，新的#user_bio是完全新的DOM节点，原来的事件绑定不会自动生效。解决这个问题的最佳方案是使用事件委托（Event Delegation），把事件绑定到始终存在的父元素上，让它监听子元素的事件。

修改思路 #

• 将mouseover、mouseleave、click事件绑定到静态的#user_bio_container容器上（这个容器从始至终都在DOM中，不会被移除），通过事件目标判断是否触发逻辑。
• 取消按钮#cancel_user_bio的事件也用委托方式处理，避免每次创建表单都重复绑定。
• 优化原始内容的存储方式，解决局部变量作用域导致的访问问题。

修正后的完整代码 #

$(document).ready(function(){
    // 初始隐藏编辑图标
    $('#user_bio_edit').hide();

    // 用事件委托处理user_bio的鼠标悬浮/离开事件
    $('#user_bio_container').on('mouseover', '#user_bio', function(){
        $('#user_bio_edit').show();
    });

    $('#user_bio_container').on('mouseleave', '#user_bio', function(){
        $('#user_bio_edit').hide();
    });

    // 用事件委托处理user_bio的点击事件
    $('#user_bio_container').on('click', '#user_bio', function(){
        // 将原始内容存储到容器的data属性中，方便后续取消时调用
        $('#user_bio_container').data('originalContent', $('#user_bio_container').html());
        
        // 清空容器并添加编辑表单（补充了输入框，你可以根据需求调整）
        $(this).parent().empty().append(`
            <form id='change_user_bio'>
                <textarea id="new_user_bio" rows="3">${$(this).text().replace('Cancel', '').trim()}</textarea>
                <span id='cancel_user_bio'>Cancel</span>
            </form>
        `);
    });

    // 用事件委托处理取消按钮的点击事件
    $('#user_bio_container').on('click', '#cancel_user_bio', function(){
        // 从data属性中取出原始内容并恢复
        const originalContent = $('#user_bio_container').data('originalContent');
        $('#user_bio_container').empty().append(originalContent);
        $('#user_bio_edit').hide();
    });
});

关键修改说明 #

1. 事件委托的使用：所有针对动态元素的事件都绑定到了静态父容器上，利用事件冒泡机制，无论子元素被移除重建多少次，事件都能正常触发。
2. 原始内容存储优化：把初始HTML存在容器的data属性中，避免了局部变量作用域导致的取消按钮无法访问原始内容的问题。
3. 简化显示/隐藏操作：用hide()和show()替代直接修改display样式，代码更简洁且避免样式冲突。

你之前尝试的直接绑定事件、移动取消按钮逻辑等方案失效，本质都是因为没有处理动态DOM元素的事件绑定问题——事件委托是处理这类场景的标准解决方案。

内容的提问来源于stack exchange，提问作者Miguel Cardona Polo