jquery - 如何在 $.each 函数内的 .on(click) 上返回当前 ID - jQuery

Question

在 '$.each(arr, function(index, val) {' 内的 jQuery '$(document).unbind().on('click',..' 函数中，我试图获取数组，它在 $.each 中返回正确，但只会返回 '.on('click')' 中的最后一个 ID

我曾尝试使用具有不同变体.closest 和.parent 的数据属性以其他方式检索ID，但没有运气让ID 返回正确。

在下面的代码片段中，我制作了一个缩小的 HTML 结构，并在 jQuery 上写了我尝试过的内容和结果。

我究竟做错了什么？

$(function() {
  $("#MessageLink<%=objMessageCenterSender("
    SenderInitials ")%>").click(function() {
    $("#MessageInlineModal").hide();
    $("#MessagesSystemContainer").hide();
    $("#MessagesSpecificUserContainer").fadeIn("slow");

    $.post('includes/messagecenter_user_messages.asp', {
      "SenderID": <%=objMessageCenterSender("SenderID")%>,
      "SenderInitials": '<%=LCase(objMessageCenterSender("SenderInitials"))%>',
      "ReceiverInitials": '<%=LCase(Session("ADsAMAccountName"))%>'
    }, function(json) {

      $('#MessagesSpecificUser').html(json.UserMessageBody);

      console.log(json.MessageIDArray) // This returns : [388, 387, 382, 381]

      var arr = JSON.parse(json.MessageIDArray);
      $.each(arr, function(index, val) {

        console.log(val) // Returns correct indexed ID i.e 387

        function startCount() {
          $('.count' + val).data('initial', new Date().getTime() - ($('.count' + val).data('secs') || 0) * 1000);
          setInterval(function() {
            $('.count' + val).text(function() {
              const diff = new Date().getTime() - $(this).data('initial');
              if (Math.floor(diff / (24 * 3600000)) > 0) {
                return Math.floor(diff / (24 * 3600000)) + ' dage'; // more than 1 day
              } else if (Math.floor(diff / 3600000) > 0) {
                return Math.floor(diff / 3600000) + ' timer'; // more than 1 hour
              } else if (Math.floor(diff / 60000) > 0) {
                return Math.floor(diff / 60000) + ' minuter'; // more than 1 minute
              } else {
                return Math.floor(diff / 1000) + ' sekunder';
              }
            })
          }, 1000);
        }
        startCount()

        tippy('#ReactionBar' + val, {
          a11y: true,
          role: 'tooltip',
          allowHTML: true,
          animation: 'perspective-extreme',
          appendTo: () => document.body,
          arrow: true,
          arrowType: 'sharp',
          boundary: 'scrollParent',
          content: json.ReactionBarContent,
          delay: 0,
          offset: [0, 5],
          duration: [325, 275],
          hideOnClick: true,
          ignoreAttributes: false,
          inertia: false,
          interactive: true,
          interactiveBorder: 2,
          interactiveDebounce: 0,
          placement: 'top-end',
          popperOptions: {},
          showOnCreate: false,
          size: 'regular',
          target: '',
          theme: 'light',
          touch: true,
          trigger: 'mouseenter focus',
          triggerTarget: null,
          moveTransition: 'transform 0.2s ease-out',
        });

        $(document).unbind().on('click', '.messageemoji', function() {

          console.log(val) // This will only retur 381 no matter which element I clicked

          var emoji = $(this).data("emoji")

          // Since 'val' does not return correct here, I have experimentet
          // with adding a data-messageid attribute to the closest DIV that
          // holds Tippy 'ReactionBar + val' (See structure in HTML). But 
          // this gives me Undefined in all attempts .. i.e.:

          var messageid = $(this).closest('.messageemoji').data('messageid');
          var messageid2 = $(this).unbind().closest('div').data('messageid');
          var messageid3 = $(this).parent('div').data('messageid');
          var messageid4 = $(this).closest('div').data('messageid');

          console.log(messageid) // Returns Undefined
          console.log(messageid2) // Returns Undefined
          console.log(messageid3) // Returns Undefined
          console.log(messageid4) // Returns Undefined

          $.post("includes/update_messagecenter_emoji.asp", {
            "ReceiverID": <%=Session("LogedInUserID")%>,
            "MessageID": messageid,
            "Emoji": emoji
          });

        });

      });

    }, 'json');

  });
});

// minified structure of Tippy JS Reactionbar:

<table>
  <tbody>
    <tr>
      <td><span><img data-emoji='smiling_face.gif' src='smiling_face.gif' class='messageemoji'></span></td>
      <td><span><img data-emoji='smiling_face.gif' src='winking_face.gif' class='messageemoji'></span></td>
      <td><span><img data-emoji='smiling_face.gif' src='beaming_face_with_smiling_eyes.gif' class='messageemoji'></span></td>
      ...
    </tr>
  </tbody>
</table>

// minified structure of #Reactionbar:

<div id='ReactionBar[i.e 387]' data-messageid='387' class='card'>
  <div class='card-body'>
    <span id='Reaction[i.e 387]'><img src='smiling_face.gif'>
</span>
    <div>Some text</div>
  </div>
</div>

更新： json.ReactionBarContent 的内容：

<table class='table table-borderless table-sm p-1 m-1' style='width: 140px;'>
  <tbody>
    <tr>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='Smiler'><img data-emoji='smiling_face.gif' src='img/smileyani/smiling_face.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='Blinker'><img data-emoji='winking_face.gif' src='img/smileyani/winking_face.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='Griner'><img data-emoji='beaming_face_with_smiling_eyes.gif' src='img/smileyani/beaming_face_with_smiling_eyes.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='ROFL'><img data-emoji='rolling_on_the_floor_laughing.gif' src='img/smileyani/rolling_on_the_floor_laughing.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='Gr&aelig;der'><img data-emoji='crying_face.gif' src='img/smileyani/crying_face.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='&nbsp;&nbsp;Like&nbsp;&nbsp;'><img data-emoji='thumbs_up.gif' src='img/smileyani/thumbs_up.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='&nbsp;&nbsp;Nej&nbsp;&nbsp;'><img data-emoji='thumbs_down.gif' src='img/smileyani/thumbs_down.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='Bunke&nbsp;lort'><img data-emoji='pile_of_poo.gif' src='img/smileyani/pile_of_poo.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='Aftale'><img data-emoji='handshake.gif' src='img/smileyani/handshake.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='Vinker'><img data-emoji='waving_hand.gif' src='img/smileyani/waving_hand.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='Ikke&nbsp;snakke'><img data-emoji='speak_no_evil_monkey.gif' src='img/smileyani/speak_no_evil_monkey.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
    </tr>
    <tr>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='Ikke&nbsp;h&oslash;re'><img data-emoji='hear_no_evil_monkey.gif' src='img/smileyani/hear_no_evil_monkey.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='Ikke&nbsp;se'><img data-emoji='see_no_evil_monkey.gif' src='img/smileyani/see_no_evil_monkey.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='Stille'><img data-emoji='shushing_face.gif' src='img/smileyani/shushing_face.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='Gaber'><img data-emoji='yawning_face.gif' src='img/smileyani/yawning_face.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='T&aelig;nker'><img data-emoji='thinking_face.gif' src='img/smileyani/thinking_face.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='Dj&aelig;vel'><img data-emoji='smiling_face_with_horns.gif' src='img/smileyani/smiling_face_with_horns.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='Mund&nbsp;lukket'><img data-emoji='zipper_mouth_face.gif' src='img/smileyani/zipper_mouth_face.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='Svimmel'><img data-emoji='dizzy_face.gif' src='img/smileyani/dizzy_face.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='Tr&aelig;t'><img data-emoji='sleeping_face.gif' src='img/smileyani/sleeping_face.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='Overrasket'><img data-emoji='hushed_face.gif' src='img/smileyani/hushed_face.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='Ruller&nbsp;&oslash;jne'><img data-emoji='face_with_rolling_eyes.gif' src='img/smileyani/face_with_rolling_eyes.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
    </tr>
    <tr>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='Sk&oslash;r'><img data-emoji='zany_face.gif' src='img/smileyani/zany_face.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='Op&nbsp;Ned'><img data-emoji='upside_down_face.gif' src='img/smileyani/upside_down_face.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='Opkast'><img data-emoji='face_vomiting.gif' src='img/smileyani/face_vomiting.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='&nbsp;Sur&nbsp;'><img data-emoji='frowning_face.gif' src='img/smileyani/frowning_face.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='Kedeligt'><img data-emoji='unamused_face.gif' src='img/smileyani/unamused_face.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='Rasende'><img data-emoji='face_with_symbols_on_mouth.gif' src='img/smileyani/face_with_symbols_on_mouth.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='Overraket'><img data-emoji='flushed_face.gif' src='img/smileyani/flushed_face.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='Frygt'><img data-emoji='face_screaming_in_fear.gif' src='img/smileyani/face_screaming_in_fear.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='Krammer'><img data-emoji='hugging_face.gif' src='img/smileyani/hugging_face.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='Fest'><img data-emoji='partying_face.gif' src='img/smileyani/partying_face.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='Cool'><img data-emoji='smiling_face_with_sunglasses.gif' src='img/smileyani/smiling_face_with_sunglasses.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
    </tr>
    <tr>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='Kloge&nbsp;&aring;ge'><img data-emoji='nerd_face.gif' src='img/smileyani/nerd_face.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='Smigret'><img data-emoji='smiling_face_with_hearts.gif' src='img/smileyani/smiling_face_with_hearts.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='Blinker&nbsp;med&nbsp;tunge'><img data-emoji='winking_face_with_tongue.gif' src='img/smileyani/winking_face_with_tongue.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='Krammer'><img data-emoji='hugging_face.gif' src='img/smileyani/hugging_face.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='Smiler'><img data-emoji='smiling_face.gif' src='img/smileyani/smiling_face.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='Blinker'><img data-emoji='winking_face.gif' src='img/smileyani/winking_face.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='Sk&aring;l'><img data-emoji='clinking_beer_mugs.gif' src='img/smileyani/clinking_beer_mugs.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='Hjerte'><img data-emoji='sparkling_heart.gif' src='img/smileyani/sparkling_heart.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='Brast&nbsp;hjerte'><img data-emoji='broken_heart.gif' src='img/smileyani/broken_heart.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='&nbsp;&nbsp;100%&nbsp;&nbsp;'><img data-emoji='hundred_points.gif' src='img/smileyani/hundred_points.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
      <td class='p-0 m-0'><span class='fa-tooltip' data-fa-tooltip='Tiden&nbsp;g&aring;r'><img data-emoji='clock.gif' src='img/smileyani/clock.gif' style='width: 24px; height: 24px; cursor: pointer;' class='messageemoji grow fa-shadow-sm'></span></td>
    </tr>
  </tbody>
</table>

我改变了什么：

    ...
     }
    startCount()
    
   json.ReactionBarContent = $(json.ReactionBarContent).attr("data-val",val)
    
    
      tippy('#ReactionBar' + val, {
        a11y: true,
        role: 'tooltip',
        ...

然后把点击移到这里：

    }, 'json');


   $(document).unbind().on('click', '.messageemoji', function(){                                                                
                                
    var val = $(this).closest("table")
    var emoji = $(this).data("emoji")

    console.log( val )

    $.post( "includes/update_messagecenter_emoji.asp", {"ReceiverID": <%=Session("LogedInUserID")%>,"MessageID": val ,"Emoji": emoji } );

  });                    
});