如何确保在此类项目的呈现时间将正确的对象引用传递给 UI 项目的点击处理程序？

如何解决如何确保在此类项目的呈现时间将正确的对象引用传递给 UI 项目的点击处理程序？

我需要从动态创建的订单项向 Javascript 函数发送 3 个参数。但我很难通过它们。第一个参数是一个对象“chatHub”，另外两个是字符串“userName”和connectionId。有没有办法使用模板文字传递这些？

此处是创建动态订单项的位置：

    function getUserNotifications(chatHub) {
    $('#notiContent').empty();
    $.each(connectedUsers,function (index,value) {
        $('#notiContent').append($(`<li onclick="OpenPrivateChatwindow(` + chatHub + ',' +`'${value.UserName}'` +','+ `'${value.ConnectionId}')">Chat With : ${value.UserName}</li>`));
    })
}

我需要传递给这个函数，但它不起作用：

    function OpenPrivateChatwindow(chatHub,userName,connectionId) {

    var ctrId = 'private_' + connectionId;

    if ($('#' + ctrId).length > 0) return;
    $("#ViewChatModal").modal({});
   $('#btnSendMessage').click(function () {

    var msg = $('#txtPrivateMessage').val()
        if (msg.length > 0) {

            chatHub.server.sendPrivateMessage(connectionId,msg);
             
        }
    })
    

解决方法

function registerUserNotifications(chatHub) {

  const rootNode = $('#notiContent');
  rootNode.empty();

  $.each(connectedUsers,function (index,value) {

    const connectionId = value.ConnectionId;
    const userName = value.UserName;
    const listItem = $(`<li>Chat With : ${ userName }</li>`);

    listItem.on( "click",function(/*evt*/) {
      OpenPrivateChatWindow(chatHub,userName,connectionId);
    });

    rootNode.append(listItem);
  });
}

,

您不能以这种方式传递对象，但您可以做的是创建 li 元素，向您将传递函数的对象添加一个侦听器。下面是一个简单的例子。

您当前正在传递文字等的地方，不要。用它创建一个新元素，然后将一个事件观察器添加到该观察器中以观察点击。

let liElement = $(`<li>Chat with ${value.UserName}</li>`);
$('#notiContent').append(liElement)
liElement.on('click',() => { OpenPrivateChatWindow(ChatHub,variable... ) })