Safari 报错：jQuery 选择器出现 Syntax error

2026-10-24支付阿杰

结论

这不是 jQuery 2.1.4 的兼容性问题。属性选择器末尾缺少方括号 ]。

原代码最终拼接出的选择器类似：

input[data-card-type="payment-one"

属性选择器没有闭合，jQuery 无法解析，因此抛出错误：

Syntax error, unrecognized expression

正确修改

在选择器末尾补上 ]：

$(this).change(function () {
    if ($(this).val() !== '') {
        $('input[data-card-type="' + paymentGroup + '"]')
            .val('')
            .prop('disabled', true);
    }
});

假设 paymentGroup 的值是 payment-one，拼接后会得到合法的 CSS 属性选择器：

input[data-card-type="payment-one"]

它会匹配下面的元素：

<input data-card-type="payment-one">

原因说明

原来的表达式是：

$('input[data-card-type="' + paymentGroup + '"')

这里的 input[ 打开了属性选择器，data-card-type="..." 指定属性值，但末尾漏掉了 ]。

JavaScript 字符串本身已经闭合，所以代码可以执行到 jQuery。真正的问题是传给 jQuery 的选择器不完整，因此错误会在回调函数执行时出现。Console 中的 (anonymous function) 表示异常发生在未命名的事件回调中，并不是另一个错误。

更易读的写法

可以先构造选择器，这样更方便在控制台中检查：

$(this).change(function () {
    if ($(this).val() !== '') {
        var selector = 'input[data-card-type="' + paymentGroup + '"]';

        $(selector)
            .val('')
            .prop('disabled', true);
    }
});

也可以不手动拼接 CSS 选择器。先选出带有该属性的元素，再按属性值过滤：

$(this).change(function () {
    if ($(this).val() !== '') {
        $('input[data-card-type]')
            .filter(function () {
                return $(this).attr('data-card-type') === paymentGroup;
            })
            .val('')
            .prop('disabled', true);
    }
});

如果 paymentGroup 可能包含引号、反斜杠等 CSS 选择器特殊字符，后一种写法更稳妥。

注意事项

如果不想禁用当前触发 change 事件的输入框，只想处理同组或其他输入框，还需要根据业务逻辑追加 .not(this)，或者调整筛选条件。例如：

$('input[data-card-type="' + paymentGroup + '"]')
    .not(this)
    .val('')
    .prop('disabled', true);

核心修复是把选择器补全为：

'input[data-card-type="' + paymentGroup + '"]'