0

内部 Javascript アプリを構築しています。編集可能なオブジェクトのリストを作成する機能があります。オブジェクトの配列をループし、各オブジェクトの概要と編集ボタンを表示します。次に、リストの下部に、新しいアイテムを作成して前の画面に移動するためのボタンがいくつか表示されます。

ループ内で作成されたものを除いて、すべてのボタンが機能します。ループ内で DOM に追加されたボタンに対してクリック イベントが発生することはありません。本当に奇妙なことは、編集変数を取得してループの外側の 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 = 表示するオブジェクトの配列
  • summary = このオブジェクト リストに表示される、渡されたオブジェクトの要約テキストを生成する関数
  • 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 に答える