web-dev-qa-db-ja.com

キャッチされていないSyntaxError：「Document」で「querySelector」の実行に失敗しました

'<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（）関数を呼び出すことができます。各ボタン内に動的にボタンを作成せずに、ボタンが1つだけの場合は正常に動作しました。しかし、それぞれの場合で、実行中にいくつかのエラーが表示されていますvar btnProgress = Ladda.create（document.querySelector（ '＃' + id））;

エラー

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

HTML5ドキュメントでは 数字で始まるID を使用できます。

値は、要素のホームサブツリー内のすべてのIDで一意であり、少なくとも1つの文字が含まれている必要があります。値にスペース文字を含めることはできません。

IDが取り得る形式には他の制限はありません。特に、IDは数字のみで構成され、数字で始まり、アンダースコアで始まり、句読点のみで構成されます。

ただし、querySelectorメソッドはDOMのクエリにCSS3セレクターを使用し、CSS3は数字で始まるIDセレクターをサポートしていません。

CSSでは、識別子（セレクターの要素名、クラス、およびIDを含む）には、文字[a-zA-Z0-9]およびISO 10646文字U + 00A0以上、およびハイフン（-）およびアンダースコア（ _）;数字、2つのハイフン、またはハイフンの後に数字を続けることはできません。

ID属性にb22などの値を使用すると、コードが機能します。

IDで要素を選択するため、.getElementByIdメソッドも使用できます。

document.getElementById('22')
60
undefined

これはHTMLでは有効ですが、整数で始まるIDをCSSセレクターで使用することはできません。

指摘したように、代わりにgetElementByIdを使用できますが、querySelectorを使用しても同じことを実現できます。

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