Назначить обработчик события каждой кнопке в цикле for

Я пытаюсь присвоить атрибут onclick каждой кнопке, сгенерированной в цикле for, без успеха. Цикл генерирует таблицу, заполненную результатами поиска, и кнопка должна передать значение JPlayer. Следующий код, использующий класс кнопки + i plain, не работает, хотя я не уверен, почему. Удаление переменной i, очевидно, просто назначит обработчик события последнему элементу массива, что и в самом деле. Я рассмотрел несколько подобных вопросов здесь, поскольку, по моему мнению, это обычная ошибка с JS-циклами, но я не могу заставить ни один из ответов работать в этой ситуации.Назначить обработчик события каждой кнопке в цикле for

function displayResults(searchData){ 

    var numResults = searchData.results.length; 

    $("#searchResults").html(""); 

    var table = document.createElement("table"); 
    table.setAttribute("class", "table"); 


    for(var i = 0;i < numResults; i++) { 
     var resultTr = document.createElement("tr"); 
     var results = searchData.results[i]; 

     var resultArtist = document.createElement("td"); 
     resultArtist.appendChild(document.createTextNode(results.artist)); 
     var resultSong = document.createElement("td"); 
     resultSong.appendChild(document.createTextNode(results.songTitle)); 
     var resultAlbum = document.createElement("td"); 
     resultAlbum.appendChild(document.createTextNode(results.album)); 
     var resultDisk = document.createElement("button");  
     resultDisk.setAttribute("class", "playButton" +i);  

     $(".playButton" +i).on("click", { value: results.diskLocation }, function(event) { 

       player(event.data.value); 
       }); 

     resultDisk.appendChild(document.createTextNode("play")); 

     resultTr.appendChild(resultArtist); 
     resultTr.appendChild(resultSong); 
     resultTr.appendChild(resultAlbum); 
     resultTr.appendChild(resultDisk); 
     table.appendChild(resultTr); 
     $("#searchResults").append(table); 
    } 
}

Я попытался с помощью this, но я не могу показаться, чтобы сделать эту работу либо. Итак, как правильно назначить обработчики событий динамически созданным элементам в цикле?

источник

2015-02-20 Fluffmeister General

Почему вы не используете делегирование событий? http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – Barmar

Почему вы смешиваете простой Javascript и jQuery? Это легче читать, если вы последовательны. – Barmar

@Barmar Я уверен, что это ужасный микс, но я редко бываю в любом месте рядом с программированием на стороне клиента, поэтому мои навыки в лучшем случае базовые. Однако, точка взята. –

Проблема в том, что вы используете $(".playButton" +i) селектор, прежде чем добавить новую кнопку в DOM, чтобы он ничего не нашел. Измените его на:

$(resultDisk).on("click", { value: results.disklocation }, function(event) { 
    player(event.data.value); 
});

Кроме того, $("#earchResults").append(table) должен быть вне цикла for. Вам нужно только добавить таблицу один раз, после того как она полностью заполнена циклом.

источник

2015-02-20 22:01:36 Barmar

Назначить обработчик события каждой кнопке в цикле for

ответ

Смежные вопросы