问题
[Bug] 安全设置页面使用已移除的 Bootstrap jQuery Button API,导致保存按钮点击无响应
环境
### 环境
- XiunoX1.1.1
- Bootstrap 5.3.7
- jQuery 3.7.1
- 后台安全设置页面
### 问题现象
后台「安全设置」中的多个页面点击“保存设置”没有反应:
- 发帖限制
- 账号安全
- 内容权限
- 其他安全设置
- 兼容的安全保护页
- 敏感词设置/导入相关提交操作
点击后不会发出保存请求,配置无法提交到后端。
### 根因
安全设置页面仍使用 Bootstrap 3/4 时代的 jQuery Button 插件 API:
```javascript
jsubmit.button('loading');
失败处理也使用:
jsubmit.button('reset');
例如页面脚本:
var jform = $('#post-limit-form');
var jsubmit = jform.find('button[type="submit"]');
jform.on('submit', function() {
jsubmit.button('loading');
var postdata = jform.serialize();
$.xpost(jform.attr('action'), postdata, function(code, message) {
// ...
});
return false;
});
但后台加载的是 Bootstrap 5.3.7:
view/vendor/bootstrap/js/bootstrap.bundle.min.js
Bootstrap 5 已移除 jQuery 插件接口,$.fn.button() 不再存在。
因此用户点击提交后,浏览器会在执行 $.xpost() 之前抛出 JavaScript 异常:
TypeError: jsubmit.button is not a function
由于异常发生在 AJAX 请求之前:
$.xpost()不会执行;浏览器不会向后端发出 POST;
admin/route/security.php不会收到保存请求;页面表现为“保存按钮点击没反应”。
受影响文件
确认使用旧 API 的安全页面包括:
admin/view/htm/security_post_limit.htm
admin/view/htm/security_account.htm
admin/view/htm/security_content.htm
admin/view/htm/security_other.htm
admin/view/htm/security_protection.htm
admin/view/htm/security_words.htm
这些页面都有:
jsubmit.button('loading');
jsubmit.button('reset');
建议修复
不要继续调用 Bootstrap 5 中已移除的:
jsubmit.button('loading');
jsubmit.button('reset');
建议新增统一的 Bootstrap 5 原生加载状态帮助函数,例如:
xn.set_submit_loading = function(button, loading, loadingText) {
var $button = $(button);
if (!$button.length) return;
if (loading) {
if ($button.data('xn-submit-loading')) return;
$button.data('xn-submit-loading', true);
$button.data('xn-submit-original-html', $button.html());
$button
.prop('disabled', true)
.attr('aria-busy', 'true')
.addClass('disabled');
var text = loadingText || $button.data('loading-text') || '提交中...';
var spinner = $('<span>', {
'class': 'spinner-border spinner-border-sm me-1',
'role': 'status',
'aria-hidden': 'true'
});
$button.empty()
.append(spinner)
.append(document.createTextNode(text));
} else {
if (!$button.data('xn-submit-loading')) return;
var originalHtml = $button.data('xn-submit-original-html');
if (originalHtml !== undefined) {
$button.html(originalHtml);
}
$button
.prop('disabled', false)
.removeAttr('aria-busy')
.removeClass('disabled');
$button
.removeData('xn-submit-loading')
.removeData('xn-submit-original-html');
}
};
然后将安全页面里的:
jsubmit.button('loading');
替换为:
xn.set_submit_loading(jsubmit, true);
将:
jsubmit.button('reset');
替换为:
xn.set_submit_loading(jsubmit, false);
修复后的提交逻辑示例
var jform = $('#post-limit-form');
var jsubmit = jform.find('button[type="submit"]');
jform.on('submit', function() {
xn.set_submit_loading(jsubmit, true);
$.xpost(jform.attr('action'), jform.serialize(), function(code, message) {
if (code == 0) {
showToast(message, 'success');
setTimeout(function() {
window.location.reload();
}, 1000);
return;
}
xn.set_submit_loading(jsubmit, false);
if (xn.is_number(code)) {
showToast(message, 'error');
} else {
jform.find('[name="' + code + '"]').alert(message).focus();
}
});
return false;
});
期望行为
点击保存后,请求应正常发送至后端;
按钮在请求期间禁用,防止重复提交;
按钮显示 Bootstrap 5 原生 spinner 和“提交中”状态;
请求失败时恢复原始按钮内容和可点击状态;
成功时显示 Toast,再刷新页面;
不应依赖已被 Bootstrap 5 移除的
$.fn.button()API。
