如何在jQuery中为HTML元素重新绑定函数？含锚标签场景

这个问题其实是jQuery里动态元素事件绑定的经典场景，我来给你拆解一下怎么解决：

为什么原有事件绑定会失效？ #

你原来用$('a').click(...)这种方式绑定事件，本质是把事件直接绑定到页面初始化时已经存在的DOM元素上。当你用replaceWith替换掉原来的a标签后，新生成的元素是全新的DOM节点，并没有继承原来的事件绑定，所以点击新元素时自然不会触发之前的逻辑。

核心解决方案：使用事件委托（Event Delegation） #

jQuery的.on()方法支持事件委托机制——你可以把事件绑定到一个静态存在的父元素（比如页面的document，或者包裹这些a标签的固定容器）上，当事件从子元素冒泡到父元素时，父元素会检查触发事件的目标元素是否匹配你指定的选择器，这样哪怕后续动态生成或替换的元素，也能正常触发事件。

改造你的代码示例 #

按照这个思路，把你原来的代码改成事件委托的形式就可以了，这里给你调整后的完整示例：

$(document).ready(function() {
    // 给所有a标签（包括后续动态生成的）绑定点击事件
    // 建议替换成更接近的静态父容器，比如如果a都在#anchor-container里，就用$('#anchor-container').on(...)
    $(document).on('click', 'a', function(event) {
        event.preventDefault();
        // 生成新的锚标签HTML（注意要写完整的标签结构，不然替换后不是可点击的锚点）
        var newAncherTags = "<a href='#new-target'>mytest1</a>";
        $(this).replaceWith(newAncherTags);
    });

    // 针对特定ID的a标签，同样用事件委托
    $(document).on('click', '#a', function() {
        // 这里写#a的处理逻辑
    });

    $(document).on('click', '#b', function() {
        // 这里写#b的处理逻辑
    });

    // 其他ID的绑定同理
    $(document).on('click', '#c', function() {
        // 这里写#c的处理逻辑
    });
});

额外小提示 #

• 尽量不要用document作为委托的父元素，优先选择最接近这些a标签的静态父容器，这样能减少事件冒泡的层级，提升性能。
• 如果替换后的新元素有特定的类名或ID，你可以在委托的选择器里更精准地指定，比如$(document).on('click', 'a.custom-class', function(){...})，这样只有匹配的元素才会触发对应逻辑。

内容的提问来源于stack exchange，提问作者Satendra Aditya