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”显示此牌已被使用，需要将该卡动态地添加到下面“玩家2字段”中的“玩家1”的DOM中。（所有这些都使用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”卡编程为动态添加到“玩家2字段”内的“玩家1” DOM（我将其包括在内是为了进行审核，因为可能存在无法预料的问题）：


// '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'.isConnected'。对于所有“玩家1”卡，无论是在玩家手中还是在战场上，其“ .isConnected”值均为“ true”。另一方面，动态添加的“玩家2”卡的“ .isConnected”值为“ false”。这可能是问题所在，因为“ .isConnected”属性显示元素是否已连接到DOM树。

以下输出来自console.log（cards）语句（'cards'是与上面的jQuery选择器相同的元素集），该输出将输出DOM树中的所有card元素。奇怪的是，“玩家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

我将尽我所能继续调试此问题，但是肯定可以多加注意。谢谢。

jQuery元素已动态添加到DOM树中，但无法与JS代码正确交互

0 个答案: