已排期 安全设置中多个页面使用已移除的 Bootstrap jQuery Button API,导致保存按钮点击无响应

问题

[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;
});

期望行为

  1. 点击保存后,请求应正常发送至后端;

  2. 按钮在请求期间禁用,防止重复提交;

  3. 按钮显示 Bootstrap 5 原生 spinner 和“提交中”状态;

  4. 请求失败时恢复原始按钮内容和可点击状态;

  5. 成功时显示 Toast,再刷新页面;

  6. 不应依赖已被 Bootstrap 5 移除的 $.fn.button() API。

最新回复
  • 贰先生 VIP 管理
    感谢反馈,已修复,测试后发布新版本。
    1小时前

请先登录后再回复 登录

发帖 2
评论 4
粉丝 0
关注 0
发新帖
目录
安全设置中多个页面使用已移除的 Bootstrap jQuery Button API,导致保存按钮点击无响应
此广告位招租
此广告位招租
此广告位招租
广告招租
广告招租
广告招租
广告招租
广告招租
广告招租