Элементы jQuery динамически добавляются в дерево DOM, но они неправильно взаимодействуют с кодом JS

Question

Чтобы подвести итог концепции создаваемого приложения, это живая карточная игра, использующая socket.io между двумя игроками.(Для текущей сборки игрового теста игра создается, когда открыты два браузера: например, два браузера открыты для 'http://localhost:8000/',, первый браузер представляет «игрока 1», а второй - «игрока 2»). Каждый игрок имеетконечное количество карт в их руке, из которой они выбирают, и у каждого игрока есть свое собственное поле битвы, куда отправляются карты при игре.

Для каждого элемента карты, отображаемого в DOM, имеется функция увеличения и меню карт, которые можно активировать, которые появляются при нажатии / наведении на карту.

Следующий код демонстрирует эту функциональность:

// 'cards' is a jQuery Object containing all card elements with class '.hasCard'
let cards = $('.hasCard');

// The click event listener is for initializing the actionable cards menu
cards.off('click').on('click', function() {
  initializeActionableCards($(this));
});

// .mouseover()/.mouseout() is for the zoom-in feature and dynamically adding a few other elements to the current card being hovered over 
cards.mouseover(function() {

  //more code here

}).mouseout(function() {

  //more code here

});

Но проблема, с которой я сталкиваюсь, заключается в том, что динамически добавленные элементы карты добавляются на экран игрока.Эти динамически добавленные элементы не функционируют так же, как карты «игрока 1», и я до сих пор не нашел веской причины, почему.В результате, функция увеличения и меню карт, о которых говорилось выше, не появляются, когда на эти элементы нажимают / наводят курсор.

Я попытаюсь помочь визуализировать проблему на примере: динамически создаваемый элемент картыбудет иметь место, если «игрок 2» разыграет карту на собственном поле битвы.Чтобы отобразить «игроку 1», что эта карта была разыграна, карту необходимо будет динамически добавить в DOM «игрока 1» в поле «player2Field» ниже.(Все это передается между клиентом / сервером с помощью socket.io)

<div id="battlefield">
  <div id="player2Field" class="playerCards player2Field">

    // Whatever card 'player 2' plays would be dynamically added here
    // Zoom-in feature/actionable cards menu does not appear for these card elements

  </div>
  <div id="player1Field" class="playerCards player1Field">

  // Any of "player 1's" cards would be displayed here
  // Zoom-in feature/actionable cards menu appear for these cards

  </div>
</div>

Кроме того, карты «игрока 2» запрограммированы для динамического добавления к DOM «игрока 1» в «player2Field» с помощьюследующий блок кода (я включил его для целей обзора, поскольку могут быть непредвиденные проблемы):

// 'player2Field' is an Array with "player 2's" current cards in play
// For each iteration, a new element 'currCard' is created with the current card's image, id, etc.

for (let i = 0; i < player2Field.length; i++) {
  let currCard = $('<div/>');
      currCard.addClass('hasCard highlight');
      currCard.css('background-image', 'url(img/' + player2Field[i].image + ')');
      currCard.attr('id', 'opp-' + player2Field[i].cardId);
      currCard.attr('onclick', 'selectOpponentCard(this.id)');
      currCard.appendTo('.player2Field');
}

Во время собственного исследования этой проблемы я обнаружил потенциально полезный Node.property '.подключен'.Для всех карт «игрока 1», независимо от того, находятся ли они в руке игрока или на поле битвы, значение «.isConnected» равно «true».С другой стороны, карты «игрока 2», которые добавляются динамически, имеют значение «.isConnected», равное «ложь».Это может быть проблемой, так как свойство .isConnected показывает, подключен ли элемент к дереву DOM или нет.

Следующий вывод взят из оператора console.log (cards) ('cards' - это набор элементов, равный селектору jQuery сверху), который выводит все элементы card в дереве DOM.Как ни странно, карты «игрока 2», похоже, добавляются в DOM и появляются на экране, но ни один из JavaScript (когда я говорю «JavaScript», я имею в виду код для функций меню «увеличение / действие») не способенвзаимодействовать с этими элементами.

0: div#opp-one12.hasCard.highlight

attributes: NamedNodeMap(4) [ class="hasCard highlight", style="background-image: url(\"img/scryb-sprites.jpg\");", id="opp-one12", … ]
isConnected: false


1: div#one14.hasCard.highlight.ui-sortable-handle.ui-draggable.ui-draggable-handle
​​
attributes: NamedNodeMap(4) [ class="hasCard highlight ui-sortable-handle ui-draggable ui-draggable-handle", style="background-image: url(\"img/scryb-sprites.jpg\"); border: 2px solid white;", onclick="selectOnField(this.id)", … ]
isConnected: true

Я продолжу отлаживать эту проблему в меру своих возможностей самостоятельно, но определенно мог бы рассмотреть ее еще несколько раз.Спасибо.