jqueryの動的クリック機能

Question

誰かが私を助けることができますか？ アイデアは、ループを備えたダイナミックなボタンを作成して、あなたはダイナミックボタンクリックイベントのライブ機能を使用する必要があり、それらの1

//I'm creating dynamic buttons like this: 

for(i=0; i<1000; i++){ 
    $contentBox.append('<button id="add'+ i +'" type="button" class="btn btn-success">Accept</button>'); 

    //but how would I create the jquery click function? 

    $('#add'+i).click(function(e) {....}); 

    //this does not create 1000 click functions. It only changes the id to the last one so what ever button you click on you will always get the las id 
} 

Answer 1

を試してみてください。むしろ、ループが終了したときに値1000を取る変数iを常に参照します。おそらく、以下のようにボタンの属性にiを格納することができます（または要素のidから読み取ることができます）。スペンサーさんのコメント@

$contentBox = $('#content'); 
 
$result = $('#result'); 
 

 
for(i=0; i<10; i++){ 
 
    $contentBox.append('<button id="add'+ i +'" data-eyeVal="' + i + '" type="button" class="btn btn-success">Accept</button>'); 
 

 
    //but how would I create the jquery click function? 
 

 
    $('#add'+i).click(function(e) {$result.append('<br/>clicked ' + $(this).attr('data-eyeVal'))}); 
 

 
    //this does not create 1000 click functions. It only changes the id to the last one so what ever button you click on you will always get the las id 
 
}

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

Answer 2

を使用するためにjqueryのクリック機能を使用することです。あなたのクリックハンドラの....にiを入れた場合はクリックハンドラを作成したとき、それが何だったかにその値を修正されません。この

$('#add'+i).live("click", function(){ 
    // codings 
}); 

Answer 3

点にある - あなたは、委任されたイベントを使用することができます。それとも、あなたは、単にボタンクラスを使用することができます。

for(i=0; i<1000; i++){ 
    $contentBox.append('<button id="add'+ i +'" type="button" class="btn btn-success">Accept</button>'); 

//Rest of your code 
} 

//Then attach the event to the class: 
$('button.btn-success').click(function(){ 
//I suspect you'll want the ID so here goes 
var buttonID = $(this).attr('id'); 
//The rest of the fun stuff 
});