调用的单击处理程序过多

Too many click handlers being called

本文关键字：程序 处理 单击 调用      更新时间：2023-09-26

我正在使用以下函数，使用数组消息动态地用一些文本和按钮填充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不是很了解，所以我不知道问题出在哪里。

的返回值

$("#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/>");
});

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

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

试试这个：

$("#messages").append("<button>Open</button><br/>").find("button:last").click(/blabla/)
相关文章：