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中没有的元素的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

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

jquery - 为动态创建的按钮添加事件监听器

3 个答案: