[解決済み] Uncaught SyntaxError: Document' の 'querySelector' の実行に失敗しました。

質問

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

私はjquery each function.Theボタンが動的に作成され、私がボタンをクリックしたときに、それはボタンに進行状況を表示する必要があります内部ボタンを生成するために上記のコードを使用しました。 私はこれを使用しています Laddaボタンローダー .

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

そして、このボタンにイベントハンドラを渡し、イベントをキャッチして上記の関数で処理します。 btnProgress オブジェクトを作成します。 その後、私はstart()またはstop()function.Iを呼び出すことができます正常にそれぞれの内部に動的にボタンを作成せずに1つだけのボタンの場合に動作している。しかし、それぞれのケースでは、実行中にいくつかのエラーが表示されます。 var btnProgress = Ladda.create(document.querySelector('#'+id))。

エラー

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

どのように解決するのですか？

あなたが使用できるのは 数字で始まるID を使用することができます。

値は、要素のホームサブツリー内のすべてのIDの中でユニークでなければならず、少なくとも1つの文字を含まなければなりません。値には空白文字を含んではいけません。

特に、IDは数字だけ、数字で始まる、アンダースコアで始まる、句読点だけで構成されるなど、どのような形式を取ることができるかに他の制限はありません。

しかし querySelector メソッドはDOMの問い合わせにCSS3のセレクタを使用しており、CSS3は数字から始まるIDセレクタをサポートしていません。

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

のような値を使用します。 b22 のような値を使用すれば、あなたのコードは動作します。

IDで要素を選択したいので、ID属性に .getElementById メソッドを使うこともできます。

document.getElementById('22')