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

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

在將按鈕添加到文檔之前，這行代碼正在執行。

save將是一個空數組。

Answer 2

那是因為您嘗試創建DOM中不存在的element的jquery對象。 您應該先附加元素，然后再通過選擇器獲取元素。 像這樣：

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

還有一種更干凈的方式將事件附加到動態添加的元素上。 看看事件委托

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);
    });