特定のスパンのID属性を取得できないのはなぜですか？

Question

私は単純なjQueryコードを持っており、ID属性が選択されたspanになるはずです。しかし、それは動作していません。

私はspanを含むdivの番号をIDにしようとしましたが、それは動作しています。私は何が間違っているのか分からなかった。私はon("click",function()機能を経由して、このHTML outputtigだ

$("span.colorbox").on("click",function(){ 
     var secilirenk = $(this).attr("id"); 
}); 

注意。

var count = 1; 

$(".kaydet").on("click",function(){ 

$(".bolgeler").append("<div class='" + count +"' style='display:block; float:left;'></div>"); 

$("."+count).append("<span class='colorbox' id='' style='display:inline-block; border: 1px solid gray;'>"); 

var kuturengi = $("#color").val(); 
$("."+count).find(".colorbox").css("background-color",kuturengi); 
$("."+count).find(".colorbox").attr("id",kuturengi); 

    var bolgeadi = $("#bismi").val(); 
$("."+count).append("<p style='display:inline-block; margin-right:15px;'>" + bolgeadi + "</p>");  
count++; 

    $('#bolgeolustur').attr("style","display:inline-block;"); 
    $('#bolge').attr("style","display:none;"); 
}); 

出力：

<div class="1" style="display:block; float:left;"><span class="colorbox" id="#123456" style="margin-top: 100px;display: inline-block;border: 1px solid gray;background-color: rgb(18, 52, 86);"></span><p style="display:inline-block; margin-right:15px;">asd</p></div> 

Tl;dr:私はそれをクリックしたときに動的にクリック機能上の他のによって作成されたスパンのID属性を取得したいです。

Answer 1

： 1-あなたは、デリゲート 、3-を使用する必要があなたのspanタグ 2-閉じなかったが準備ができて

文書にそれらを置きます

$("body").delegate("span.colorbox","click",function(){ 
     var secilirenk = $(this).attr("id"); 
     alert(secilirenk); 
}); 

これは動作します。それが動作しないhttps://jsfiddle.net/9bowx36r/

Answer 2

var count = 1; $("."+count)は有効なCSSセレクタではありません。 CSSで

、識別子は数字で始めることはできませんが、あなたはそれを逃れることができます。

$(".1") // wrong 
$(".\\31 ") // ok 
$(".\\000031") // ok 

またはCSS.escapeを使用することを検討してください：

$("." + CSS.escape(count)) // ok 

Answer 3

動的なコンテンツを生成するときに、CLICK上の伝統的なDOMの中に既に存在するものに適用されるため、動作しません。

代わりにこれを試してください：あなたは、いくつかの問題持って

$(document).on("click","span.colorbox",function(){ 
     var secilirenk = $(this).attr("id"); 
     console.log(secilirenk); 
});