jquery dynamic click function

Question

Может кто-нибудь мне помочь? Идея заключается в том, чтобы создавать динамические кнопки с петлей, а затем использовать функцию щелчка Jquery, чтобы использовать один из них

//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

Если поставить i в .... вашего обработчика щелчка, он не исправит свою ценность, что это было, когда был создан обработчик щелчка; скорее, он всегда будет ссылаться на переменную i, которая принимает значение 1000, когда вы закончите цикл. Возможно, вы можете сохранить i в атрибуте кнопки, как показано ниже (или прочитать ее из идентификатора элемента).

$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

Вы должны использовать живую функцию для динамических событий щелчка кнопки. попробуйте этот

$('#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 
});