javascript - 未捕获的语法错误 : Failed to execute 'querySelector' on 'Document'

Question

<button id="'+item['id']+'" class="btnDeactivateKeyInChildPremiumCustomer waves-effect waves-light">ok</button>

我使用上面的代码在 jquery 每个函数内生成按钮。按钮是动态创建的，当我单击按钮时，它应该显示按钮上的进度。我正在使用这个Ladda Button Loader .

btnDeactivateKeyInChildPremiumCustomerClick : function(event){
   var id = event.currentTarget.id;
   var btnProgress = Ladda.create(document.querySelector('#'+id));
   // btnProgress.start(); or btnProgress.stop();
}

然后我将按钮传递给事件处理程序，捕获事件处理上述函数。在该函数内，它将创建一个 btnProgress 对象。之后我可以调用 start() 或 stop() 函数。我已经成功地在只有一个按钮的情况下工作，而无需在每个按钮内动态创建按钮。但在每种情况下，执行 var btnProgress = Ladda.create(document.querySelector('#'+id));

时都会显示一些错误

错误

Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document': '#22' is not a valid selector.

Answer 1

您可以使用IDs that start with a digit在您的 HTML5 文档中:

The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc.

但是 querySelector 方法使用 CSS3 选择器来查询 DOM，而 CSS3 不支持以数字开头的 ID 选择器:

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit.

使用像 b22 这样的值作为 ID 属性，您的代码就可以工作。

由于您想通过 ID 选择元素，您还可以使用 .getElementById 方法:

document.getElementById('22')