未捕获的SyntaxError:无法在'Document'上执行'querySelector'

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

您可以使用以HTML5文档中的数字开头的ID:

该值必须在元素的主子树中的所有ID中唯一,并且必须至少包含一个字符.该值不得包含任何空格字符.

ID可以采取什么形式没有其他限制; 特别是,ID可以只包含数字,以数字开头,以下划线开头,只包括标点符号等.

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

在CSS中,标识符(包括选择器中的元素名称,类和ID)只能包含字符[a-zA-Z0-9]和ISO 10646字符U + 00A0和更高,加上连字符( - )和下划线( _); 它们不能以数字,两个连字符或连字符后跟数字开头.

使用类似于b22ID属性的值,您的代码将起作用.

由于您想按ID选择元素,您还可以使用.getElementById方法:

document.getElementById('22')

Answer 2

虽然这在HTML中有效,但您不能在CSS选择器中使用以整数开头的ID .

正如所指出的,你可以使用getElementById,但你也可以用querySelector:

document.querySelector("[id='22']")