javascript - jQueryクリックハンドラーの追加

Question

ページに次のdivがあります（変更できません）。

   <div id=":0.control">Click me</div>

ここで、jQueryクリックハンドラーを追加します

$("#:0.control").click(function () {
         alert('Clicked');
     }
 );

上記はエラーになります。解決策はありますか？

Answer 1

それ以外の

$("#:0.control")

試す

$('div[id="\\:0\\.control"]')

デモ

また

$("#\\:0\\.control") // better that previous one

デモ

Answer 2

セレクターで特殊文字をエスケープできます。

$("#\\:0\\.control").click(function () {
     alert('Clicked');
});​

これが実際の例です。

HTML5 doctypeを使用していない限り、IDは無効であることに注意してください。また、特殊文字のエスケープは、別の回答のように属性セレクターを使用するよりも大幅に高速であることに注意してください。

この理由は、ブラウザがSizzlegetElementByIdに依存するのではなく、の速度を利用できるためです。querySelector

Answer 3

これは醜いですが、機能します：

$(document.getElementById(":0.control"))

場合によっては、idが変数に格納されているときは、次を使用する必要があります。

var id = ":0.control";
$(document.getElementById(id))

それ以外の場合、pureを使用する場合は、jQueryスラッシュを追加する必要があります。

より複雑な例：

var idArray = [":bla-bla","bla[]","commonId"];
$.each( idArray, function(i,id){
    $(document.getElementById(id)) //do some stuff
    //Otherwise, when using pure jQuery, we need to add slashes before ':','[',']' characters 
});