使用jQuery开发表单面板切换功能，绑定onclick事件不生效如何解决

问题原因 #

• 你封装的login()函数没有直接执行面板切换逻辑，仅给绿色面板新增了一次点击事件监听，点击按钮时不会主动触发切换
• 表单内的按钮默认类型是submit，点击后会触发表单提交刷新页面，导致功能失效
• 重复定义了面板高度相关变量，存在冗余代码

修复方案 #

1. 调整JS代码 #

把面板切换的核心逻辑抽离出来，直接在login()中执行，不要嵌套$(document).ready()，也不要重复绑定事件：

// 全局存储面板高度，避免重复计算
let panelOne, panelTwo;

$(document).ready(function () {
  panelOne = $(".form-panel.two").height();
  panelTwo = $(".form-panel.two")[0].scrollHeight;

  // 原绿色面板点击逻辑保留
  $(".form-panel.two")
    .not(".form-panel.two.active")
    .on("click", function (e) {
      e.preventDefault();
      openSecondPanel();
    });

  $(".form-toggle").on("click", function (e) {
    e.preventDefault();
    $(this).removeClass("visible");
    $(".form-panel.one").removeClass("hidden");
    $(".form-panel.two").removeClass("active");
    $(".form").animate(
      {
        height: panelOne,
      },
      200
    );
  });
});

// 抽离公共的打开第二个面板逻辑
function openSecondPanel() {
  $(".form-toggle").addClass("visible");
  $(".form-panel.one").addClass("hidden");
  $(".form-panel.two").addClass("active");
  $(".form").animate(
    {
      height: panelTwo,
    },
    200
  );
}

// 按钮点击直接调用打开逻辑，同时阻止默认提交行为
function login(e) {
  e.preventDefault();
  openSecondPanel();
}

2. 调整HTML按钮代码 #

给绑定点击事件的按钮添加type="button"，同时把事件对象传进去：

<button type="button" onclick="login(event)">Գրանցվել</button>

修改后点击注册按钮就能直接打开第二个面板，原有点击绿色面板的功能也可以正常使用。

内容的提问来源于stack exchange，提问作者Արեգ Խաչատրյան