jQuery问题：函数内按钮无法触发另一个函数的onclick事件

我来帮你排查下这个问题哈！你遇到的情况应该是点击主按钮弹出新窗口后，窗口里的表单按钮onclick事件没正常触发，大概率是动态生成HTML时的写法不规范或者DOM加载时机不对导致的。

问题根源分析 #

你原来的代码里可能存在这些问题：

• 拼接HTML时标签没有完整闭合（比如你写的<label>Password</label...没写完），导致浏览器解析DOM结构混乱，事件无法正确绑定。
• 弹窗内的按钮事件如果调用主窗口的函数，会因为作用域不同找不到对应函数；或者没有在弹窗的文档里正确定义事件逻辑。
• 没有完成弹窗的文档写入操作，导致DOM没有完全加载。

修正后的完整代码 #

我把你的代码调整成了更可靠的写法，你可以参考：

<!-- 主页面的按钮 -->
<input type="button" name="passw" id="passw" value="Password" onclick="DisplayPassword();">

<script>
function DisplayPassword(){
  // 创建弹窗，指定宽高避免窗口太小
  const dispWin = window.open('', '', 'toolbar=no,status=no,width=450,height=250');
  
  // 先判断弹窗是否被浏览器拦截
  if (!dispWin) {
    alert('弹窗被浏览器拦截啦，请允许当前页面的弹窗权限！');
    return;
  }
  
  // 拼接完整的HTML结构，包含弹窗内的事件处理逻辑
  const popupHtml = `
    <html>
      <head>
        <title>验证密码</title>
      </head>
      <body>
        <form name="checkPW">
          <center>
            <table cellpadding="30" border="1">
              <tr>
                <td>
                  <label>Password：</label>
                  <input type="password" name="userPW" id="userPW">
                  <!-- 弹窗内的按钮，绑定内部定义的函数 -->
                  <input type="button" value="提交验证" onclick="checkUserPassword()">
                </td>
              </tr>
            </table>
          </center>
        </form>
        
        <script>
          // 在弹窗内部定义事件处理函数，作用域属于弹窗文档
          function checkUserPassword() {
            const inputPw = document.getElementById('userPW').value;
            if (inputPw.trim() === '') {
              alert('请输入密码！');
              return;
            }
            // 这里可以添加你的密码验证逻辑，比如和预设值对比
            alert('你输入的密码是：' + inputPw);
            // 验证完成后可以关闭弹窗：window.close();
          }
        </script>
      </body>
    </html>
  `;
  
  // 向弹窗写入内容并关闭文档流，确保DOM加载完成
  dispWin.document.write(popupHtml);
  dispWin.document.close();
}
</script>

关键修改点说明 #

• 完整的HTML结构：给弹窗加上了<html>、<head>、<body>等完整标签，避免浏览器解析异常。
• 弹窗内部定义函数：把按钮的事件处理函数写在弹窗的<script>标签里，这样函数的作用域属于弹窗文档，能被按钮正确调用。
• 关闭文档流：调用dispWin.document.close()完成写入，确保弹窗的DOM完全加载，事件能正常绑定。
• 拦截判断：增加了弹窗被拦截的提示，提升用户体验。
• 规范变量命名：用dispWin代替原来的DispWin，符合JS驼峰命名规范，也避免全局变量污染。

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