jQuery修改按钮ID后绑定的on()点击事件无法触发问题求解

核心问题原因 #

1. 初始代码中on()方法的参数顺序写反：jQuery的on()方法第一个参数是事件名，第二个才是目标元素选择器，你原代码把#open_chat放到了第一个参数位，事件绑定本身就不生效。
2. 直接给#close_chat绑定的点击事件是绑定在DOM元素本身上的，修改元素ID不会自动解绑原有事件，需要手动调用off()方法移除旧事件。
3. 你更新后的代码没有初始化调用打开事件的绑定函数，切换状态后也没有调用对应事件的绑定方法，导致状态切换后事件不生效。

最优实现方案 #

推荐统一使用事件委托绑定事件，不需要手动来回解绑/绑定，代码更简洁稳定：

$(document).ready(function () {
    // 构建DOM结构
    const container = $("<div />").addClass("chat_container");
    const crmChat = $("<a />")
        .addClass("crm")
        .attr({
            href: "https://google.com",
            target: "_blank"
        })
        .text("Chat?");
    const chatBtn = $("<button />").attr("id", "close_chat").text("<");
    
    container.append(crmChat).append(chatBtn).insertAfter("#heading");

    // 委托绑定关闭按钮逻辑
    $(".chat_container").on("click", "#close_chat", function () {
        $(this).attr("id", "open_chat").text(">");
        $(".chat_container").removeClass("animate-open").addClass("animate-close");
    });

    // 委托绑定打开按钮逻辑
    $(".chat_container").on("click", "#open_chat", function () {
        $(this).attr("id", "close_chat").text("<");
        $(".chat_container").removeClass("animate-close").addClass("animate-open");
    });
});

如果你要沿用原有手动绑定的写法，修正后代码如下： #

$(document).ready(function () {
    // 此处保留你原有的DOM构建逻辑，省略

    // 初始化绑定关闭事件
    attachClosedChatListner();

    function attachOpendChatListener() {
        // 先解绑已有事件避免重复绑定
        $(".chat_container").off("click", "#open_chat").on("click","#open_chat", function () {
            $("#open_chat").attr("id", "close_chat").html("<");
            $(".chat_container").removeClass("animate-close").addClass("animate-open");
            // 切换状态后绑定关闭事件
            attachClosedChatListner();
        });
    }

    function attachClosedChatListner() {
        $("#close_chat").off('click').on('click', function() {
            $(this).attr("id", "open_chat").html(">");
            $(".chat_container").removeClass("animate-open").addClass("animate-close");
            // 切换状态后绑定打开事件
            attachOpendChatListener();
        });
    }
});

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