0

我正在构建一个内部 Javascript 应用程序，它具有创建可编辑对象列表的功能。它循环遍历一组对象，并显示每个对象的摘要以及一个编辑按钮。然后它会在列表底部显示更多按钮，用于创建新项目并转到上一个屏幕。

所有按钮都有效，期待在循环中创建的按钮。在循环中添加到 DOM 的按钮永远不会触发 click 事件。真正奇怪的是，如果我使用编辑变量并将其附加到循环之外的 DOM，那么单击事件确实会触发。

var displayArray = function (where, list, summarise, display, newItem, completion, back) {
    var listing = $("<div>");
    listing.addClass("Listing");

    for (var i = 0; i < list.length; i++) {
        var index = i;
        var edit = createButton("Edit", function () {
            display(list[index]);
        });

        var anchor = $("<p>");
        anchor.text(summarise(list[index]));
        anchor.append(edit); //this will create an edit button, but the click event is never fired
        listing.append(anchor);
    }
    where.append(listing);

    var create = createButton("New", newItem);

    where.empty();
    where.append(listing);
    where.append(create);
    //where.append(edit); // uncomment this and it will create a button that will display the last item in the list
    if (back) { where.append(createButton("Back", back)); }

    if (completion) {
        completion();
    }
}

var createButton = function(name, action){
    var button = $("<input>");
    button.attr("type", "button");
    button.attr("value", name);
    button.on("click", action);
    return button;
}

传入函数的变量如下：

  • where = 将显示项目的 html 元素
  • list = 要显示的对象数组
  • summarise = 为传递给它的对象生成摘要文本的函数，该对象将为此对象列表显示
  • display = 为对象生成编辑屏幕的函数
  • newItem = 生成新对象并显示其编辑屏幕的函数
  • 完成 = 在屏幕构建后调用的函数，它将根据需要生成任何额外的 UI。
  • back = 显示上一屏的函数

该行为在 IE9、Firefox 20.0.1 和 Chrome 29.0.1547.66 中是一致的

4

1 回答 1

0

我确切地知道问题出在哪里：

尝试这个。

for (var i = 0; i < list.length; i++) {
    var index = i;
    var edit = createButton("Edit", (function (item) {
        return function () {
            display(item);
        };
    })(list[index]));
于 2013-09-04T13:33:19.480 回答