は、動的に生成されたボタンのIDを取得する方法

Question

私の自動車は、いくつかのボタン私は、ボタンのいずれかがクリックされたときに別のアクションを実行することにしたい

<div class="wrapper" id="wrapper"></div> 
<script type="application/javascript"> 
    var x, i, y; 
    for(i = 0; i <= 10; i++){ 
     y = i; 
     x = "<button class=btn_class"+y+"id=btn"+y+"onclick(alert(this.id);>Ukor</button>"; 
     $("#wrapper").append(x); 
    } 

    $("button").on("click", function(){ 
     alert(this.id); 
    }); 
</script> 

をgenrated。 しかし、私はidによってボタンを得ることができないようです。また、関数に引数としてyを送る必要があります

Answer 1

問題は、属性を区切るスペースがないことです。

<button class=btnclass0id=btn0onclick(alert(this.id);>Ukor</button> 

だからすべては class属性に起こっている：だから、のように見える要素を作成しています。属性値の前後には引用符を、属性間にはスペースを入れる必要があります。

$("button").on("click", ...)を使用しているため、onclick属性は必要ありません。

だから、次のようになります。

x = "<button class='btn_class"+y+"' id='btn"+y+"'>Ukor</button>"; 

また、要素を作成するjQueryのオブジェクト指向の方法を使用することができます：BTW

x = $("<button>", { 
     "class": "btn_class" + y, 
     "id": "btn"+y, 
     text: "Ukor" 
}); 

、なぜあなたはクラスでyを置けばいいの？通常、クラスのポイントは、すべての同様の要素が同じクラスを持つようにするため、それらを一度に扱うことができます。

Answer 2

あなたは、属性間に必要なスペースや句読点なしで、あなたのHTMLを構築しているので、あなたのボタンのHTMLは次のようになりますように見えます：

<button class=btn_class0id=btn0onclick(alert(this.id);>Ukor</button> 

これは何のid属性がないことを意味します。

はこのようにそれを固定してみてください。

x = '<button class="btn_class' + y + '" id="btn' + y + '" onclick="alert(this.id);">Ukor</button>'; 
$("#wrapper").append(x); 

...いっそ、あなたのDOMを構築するためにjQueryのAPIを使用します。

x = $('<button onclick="alert(this.id);">Ukor</button>').attr({ 
    id: 'btn' + y, 
    className: 'btn_class' + y 
}); 

Answer 3

あなたの問題はあなたのコードの書式文字列であります

<button class=btnclass0id=btn0onclick(alert(this.id);>Ukor</button> 

を生成し、次のものが必要です。

<button class="btnclass0" id="btn0" onclick="alert(this.id);">Ukor</button> 

var x, i, y; 
 
for (i = 0; i <= 10; i++) { 
 
    y = i; 
 
    x = "<button class='btn_class" + y + "' id='btn" + y + "'>Ukor</button>"; 
 
    $("#wrapper").append(x); 
 
} 
 

 
$("button").on("click", function() { 
 
    alert(this.id); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper" id="wrapper"></div>

Answer 4

単一の文字列にコンテンツを追加して、DOMに一度、それを追加 - 各反復を追加するよりも速いです。次に、指定されたクリックイベントハンドラを使用して、ボタンのIDを警告します。クラスは共通の価値がある必要があります.IDのようにユニークではありません。また、 "y"は必要ありません。関数に数値を送る必要がある場合は、既にidに数値が入っています。必要に応じて使用することができます。

$(document).ready(function(){ 
 
    var x=""; 
 
    for(i = 0; i <= 10; i++){ 
 
     x += "<button class='btn_class' id='btn"+i+"'>Ukor</button> "; 
 
     } 
 

 
    $("#wrapper").append(x); 
 

 
    $(document).on('click','.btn_class', function(){ 
 
     (alert($(this).attr('id'))) 
 
      }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper" id="wrapper"></div>

Answer 5

私は、連結上attrsに間の間隔のエラーを回避するためにString templateを使用することをお勧めします - >より良い文字列中の変数の可視性に：

 
     $(Array.from({length:11},(v,k)=>k) 
 
      .map((i)=>`<button class="btn_class${i}" id="btn${i}" onclick="alert(this.id)">Ukor${i}</button>`) 
 
      .join('')).appendTo('#wrapper')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper" id="wrapper"></div>