时间戳

首页 > 解决方案 > 带参数的动态创建的订单项上的事件绑定

jquery - 带参数的动态创建的订单项上的事件绑定

问题描述

我正在使用 jQuery 创建连接用户的动态列表。我在绑定到单击事件并将参数传递给它时遇到问题。

创建动态订单项的代码如下：

setTimeout(function () {
  $(".kt-subheader__toolbar").html('<span class="noti" id="editDash"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" class="kt-svg-icon"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M17,12 L18.5,12 C19.3284271,12 20,12.6715729 20,13.5 C20,14.3284271 19.3284271,15 18.5,15 L5.5,15 C4.67157288,15 4,14.3284271 4,13.5 C4,12.6715729 4.67157288,12 5.5,12 L7,12 L7.5582739,6.97553494 C7.80974924,4.71225688 9.72279394,3 12,3 C14.2772061,3 16.1902508,4.71225688 16.4417261,6.97553494 L17,12 Z" fill="#000000" /><rect fill="#000000" opacity="0.3" x="10" y="16" width="4" height="4" rx="2" /></g></svg><span class="count">&nbsp;</span></span><div class="noti-content"><div class="noti-top-arrow"></div> <ul id="notiContent"></ul></div>');
  $("#editDash").on("click", function (e) {
    e.stopPropagation();
    $('.noti-content').show();
    var count = 0;
    count = parseInt($('span.count').html()) || 0;
    //only load notification if not already loaded
    if (count > 0) {

      getUserNotifications();

    }
    $('span.count', this).html('&nbsp;');
  })
}, 2000);

function getUserNotifications() {

  $('#notiContent').empty();
  $.each(connectedUsers, function (index, value) {

    $('#notiContent').append($('<li onclick="startUserChat(' + value.ConnectionId + ')">New contact : ' + value.UserName + ' (' + value.ConnectionId + ')</li>'));

  })
}

function startUserChat(connectionId) {
  alert("Start chat with user: " + connectionId);
}

我不仅需要在startUserChat(connectionId)单击订单项时调用“”函数，而且还需要将该订单项的 connectionId 传递给该函数。目前，我根本无法触发 onclick，我意识到这是因为订单项是动态创建的，并且我查看了一些解决方案，说我需要绑定到父元素，但是接下来该怎么做我传参数？

标签： jquery

解决方案

您的代码应该可以正常工作...我认为使其无法正常工作的唯一原因value.ConnectionId可能是字符串。

所以我建议你使用模板文字，所以引号问题比字符串连接更容易管理。

尝试这个：

$('#notiContent').append($(`<li onclick="startUserChat('${value.ConnectionId}')">New contact : ${value.UserName} (${value.ConnectionId})</li>`));

请注意，传递的参数周围有一些引号${value.ConnectionId}。

推荐阅读