从HTML中调用jQuery函数失败的问题排查与修复

你的代码主要存在两个核心问题，导致BoxMsg函数无法正常生效：

1. 函数作用域不匹配 #

你把BoxMsg定义在了$(document).ready()的回调函数内部，这意味着这个函数属于局部作用域，只能在回调内部访问。但HTML按钮的onclick属性是在全局作用域下查找函数的，自然找不到这个局部定义的BoxMsg。

2. 缺少$.MessageBox的依赖支持 #

$.MessageBox并不是jQuery原生自带的方法，它属于第三方消息框插件（比如jQuery UI Dialog、自定义封装的弹窗插件等）。如果没有引入对应的插件库，调用这个方法会直接抛出“方法不存在”的错误。

修改方案一：调整作用域+补全插件依赖 #

把BoxMsg暴露到全局作用域，同时引入对应弹窗插件的资源（这里以jQuery UI为例，你可以根据实际使用的插件调整）：

<!-- 按顺序引入依赖：先jQuery，再插件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!-- 示例：引入jQuery UI插件（含样式） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">

<script>
// 将函数定义在全局作用域，让onclick能找到它
function BoxMsg(mess) { 
  // 这里替换为你实际使用的弹窗插件语法，示例用jQuery UI的dialog
  $(`<div>${mess}</div>`).dialog();
} 

$(document).ready(function() { 
  // 这里可以放置其他页面初始化逻辑
});
</script>

<input id="rxc021" name="rxc021" type="button" class="e-btn e-btn-border" value="Ask" onclick="BoxMsg('rxc021 - option 1')"> 
<input id="rxc022" name="rxc022" type="button" class="e-btn e-btn-border" value="Ask" onclick="BoxMsg('rxc022 - option 2')"> 
<input id="rxc023" name="rxc023" type="button" class="e-btn e-btn-border" value="Ask" onclick="BoxMsg('rxc023 - option 3')"> 
<input id="rxc024" name="rxc024" type="button" class="e-btn e-btn-border" value="Ask" onclick="BoxMsg('rxc024 - option 4')">

修改方案二：使用jQuery事件绑定（更推荐） #

避免使用HTML内联onclick，改用jQuery的事件绑定方式，既能保持函数的局部作用域，又让代码更易维护：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">

<script>
$(document).ready(function() { 
  // 局部定义函数，不需要暴露到全局
  function BoxMsg(mess) { 
    $(`<div>${mess}</div>`).dialog();
  } 

  // 给所有目标按钮绑定点击事件
  $('input.e-btn').click(function() {
    // 从按钮ID提取消息内容，也可以自定义其他方式传递
    const btnId = $(this).attr('id');
    const optionNum = btnId.slice(-2);
    BoxMsg(`${btnId} - option ${optionNum}`);
  });
});
</script>

<input id="rxc021" name="rxc021" type="button" class="e-btn e-btn-border" value="Ask"> 
<input id="rxc022" name="rxc022" type="button" class="e-btn e-btn-border" value="Ask"> 
<input id="rxc023" name="rxc023" type="button" class="e-btn e-btn-border" value="Ask"> 
<input id="rxc024" name="rxc024" type="button" class="e-btn e-btn-border" value="Ask">

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