Question

我使用以下函数使用数组消息动态填充带有一些文本和按钮的div：

var populateMessages = function(messages){
    for (var index in messages){
        (function(){
            var id = index;
            $("#messages").append(messages[index]["title"])
            $("#messages").append("<button>Open</button><br/>").click(function(){console.log(message["id"])})
        }())
    }
};

此代码使用文本和按钮正确填充div。问题是如果我点击任何按钮，所有按钮的点击处理程序都会激活。所以使用两个按钮，如果我点击第一个按钮，它应该记录为“0”，如果我点击第二个按钮，它应该记录为“1”。相反，如果我点击其中任何一个，它会记录“0 1”

我不是在使用Javascript，所以我不知道问题是什么。

Answer 1

的返回值

$("#messages").append("<button>Open</button><br/>")

是#messages，而不是添加的按钮。因此，每次循环时，您都会向#messages添加另一个点击处理程序，而不是按钮。

尝试：

$.each(messages, function(index, message) {
    $("#messages").append(message.title);
    $("<button>Open</button>").click(function() {
        console.log(message.id);
    }).appendTo("#messages");
    $("#messages").append("<br/>");
});

Answer 2

$("#messages").append("<button>Open</button><br/>")

返回#messages而不是button，因此您将点击事件设置为#message。

试试这个：

$("#messages").append("<button>Open</button><br/>").find("button:last").click(/blabla/)

调用的点击处理程序太多

2 个答案: