Javascript：使用不同参数动态设置onclick事件

试图用最小的功能更改重写一个10多年前编写的程序。从aspx页面到.NETCore3.0。在大多数情况下，一切都是直截了当的。但我有一个问题——主要是因为我不擅长Javascript（我的在线搜索还没有揭示解决方案）

在旧系统中，搜索姓名的过程如下：

点击一封信

字母“link”返回代码隐藏

代码隐藏将新字母附加到搜索字符串，然后查询数据库中的值

代码将记录返回到GridView

因此，所有26个字母都显示在一行中，每个字母都是一个链接。每个链接都由相同的代码隐藏函数处理。为了保持最小的功能更改（因为用户想要相同的功能），我将保留所有26个字母的链接。但是，我不想调用服务器代码，而是希望使用javascript和ajax调用尽可能多地完成任务。以下是我目前拥有的：

HTML

A
B
C
D
E

Javascript

$(function () {
    var searchLetters = document.getElementsByClassName("searchLetters");
    for (i = 0; i < searchLetters.length; ++i) {
        var letter = searchLetters[i].getAttribute('title');
        searchLetters[i].addEventListener('click', function (letter) {
            addClickedLetter(letter);
        });
    }
});

function addClickedLetter(letter) {
    searchString = $("#txtSearchLastName").val() + letter;
    $("#txtSearchLastName").val(searchString);
};

$（函数（）{
var searchLetters=document.getElementsByClassName（“searchLetters”）；
对于（i=0；i

对于字母A、B和C，当我单击链接时，它们会附加到字符串中，并显示在文本框中。但是，我宁愿动态地分配它，而不是在HTML中分配

onclick

函数。这就是D&E的用武之地。我的代码使用

searchLetters

类遍历元素，并分配它们的

onclick

函数。而且它“有点”有效。它确实分配了一个

onclick

函数，但不幸的是，这两个D&E都使用相同的值：E。我假设代码保留了

字母设置为的最后一个值，并且设置的每个
onclick
都使用相同的值

我需要做些什么来确保设置的onclick函数保留分配时的值？
该副本涵盖了您的问题，但这是一个XY问题。处理这个问题的方法要短得多<代码>$（'.searchLetters'）。on（'click'，function（）{addClickedLetter（this.title）；}）嗯…让我试试第二个选项。稍后将返回。jQuery
on
在结果堆栈上执行隐式表达式。你没有必要明确地写它，也许我不知道应该放在哪里，但是
this.title
显示为空白。我把它放在
$（function（）{…}）中它应该去别的地方吗？我在第二条评论中就是这么说的；
$(function () {
    var searchLetters = document.getElementsByClassName("searchLetters");
    for (i = 0; i < searchLetters.length; ++i) {
        var letter = searchLetters[i].getAttribute('title');
        searchLetters[i].addEventListener('click', function (letter) {
            addClickedLetter(letter);
        });
    }
});

function addClickedLetter(letter) {
    searchString = $("#txtSearchLastName").val() + letter;
    $("#txtSearchLastName").val(searchString);
};