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

How does one assure passing a correct object reference to an UI item's click handler at such an item's render time?

我需要从动态创建的订单项向 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, userName, msg);
             
        }
    })
    

你不能那样传递对象,但你可以做的是创建 li 元素,向你将传递函数的对象添加一个监听器。下面是一个简单的例子。

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

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