JQuery - добавить прослушиватель событий для динамически созданных кнопок

Question

Я пробовал несколько решений, но никто не работал, и я не понимаю, почему ...

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

Что мне нужно сделать, это сохранить поля формы, нажав кнопку «Сохранить».

Вот код, который я пытаюсь использовать, но это не работает:

var i = 0; 
var addCounter = $("#addCounter"); 

addCounter.on("click", function() { 
    ++i; 
    var body = $("body"); 
    var save = $('#save-' + i); 
    var name = $("#counterName-" + i); 
    var date = $("#counterStart-" + i); 
    var color = $("#counterColor-" + i); 
    var status = $("#status-" + i); 

    var templateToAppend = '<li class="list-group-item">' + 
     '<div class="form-inline">' + 
     '<div class="form-group">' + 
     '<label for="counterName-' + i + '">Counter Name</label>' + 
     '<input type="text" id="counterName-' + i + '" placeholder="Counter name"/></div>' + 
     '<div class="form-group">' + 
     '<label for="counterStart-' + i + '">Starting from:</label>' + 
     '<input type="text" id="counterStart-' + i + '" placeholder="dd/mm/yy"/></div>' + 
     '<div class="form-group">' + 
     '<label for="counterColor-' + i + '">Counter Color:</label>' + 
     '<input id="counterColor-' + i + '" class="jscolor"></div>' + 
     '<button id="save-' + i + '" class="btn btn-primary">Save</button>' + 
     '<div id="status-' + i + '"></div></div></li>'; 
    body.append(templateToAppend); 
    save.click(function() { 
     debugger; 
     console.log("clicked on save: ", save); 
     var localStorage = { 
      id: i, 
      counterName: name.value, 
      counterDate: date.value, 
      counterColor: color.value 
     }; 

     console.log(localStorage); 
    }); 
}); 

отладчик не работает, и я не понимаю, почему.

Не могли бы вы помочь мне понять, почему?

Большое спасибо

Answer 1

Ну, это потому, что вы пытались создать объект jquery элемента, которого нет в DOM. Сначала вы должны добавить элемент, а затем получить элемент по селектору. Например:

body.append(templateToAppend); 
var save = $('#save-' + i); 
var name = $("#counterName-" + i); 
var date = $("#counterStart-" + i); 
var color = $("#counterColor-" + i); 
var status = $("#status-" + i); 

также существует гораздо более чистый способ прикрепления события к динамически добавленному элементу. Взгляните на Event Delegation

Answer 2

var save = $('#save-' + i); 

Эта строка кода выполняется до того, как кнопка добавляется в документе.

save будет пустым массивом.

Answer 3

Использования делегации события для вас второго события щелчка, место события щелчка вне первого события щелчка

$('body').on('click','.list-group-item btn',function() { 
     console.log("clicked on save: ", $(this).attr('id')); 
     var i = $(this).attr('id').split('-')[1]; 
     var localStorage = { 
     id: i, 
     counterName: $("#counterName-" + i).val(), 
     counterDate: $("#counterStart-" + i).val(), 
     counterColor: $("#counterColor-" + i).val() 
    }; 

    console.log(localStorage); 
    });