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

那是因为您尝试创建 DOM 中不存在的元素的 jquery 对象。您应该先附加元素，然后通过选择器获取元素。像这样:

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