jQuery toggleClass() 方法不适用于 JSON 生成的内容

我有一个很好的CSS生成卡片列表。它们包含图标和文本，一旦你点击它们，就会有一个很好的动画展开，以显示更多的图标和选项。我对列表进行了硬编码，并使其看起来和行为完全符合我想要的方式。

现在，我在数据库上有一些 JSON 数据，我想使用该数据动态填充列表。

问题：它工作得很好，除了由jQuery toggleClass（）触发的CSS动画不再适用。

我该如何解决这个问题？这是我的代码。

HTML：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <link rel="stylesheet" href="css/customFitStyling.css" type="text/css">
    <link rel="stylesheet" href="css/w3c_v4.css" type="text/css">
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/customFitFunctions.js"></script>
  </head>
  <body>
    <!--APPEND CARDS-->
    <ul id="cardList" class="cards">
    </ul>
  </body>
</html>

JavaScript：

    // Sync with Firebase in real time.
    dbRef.on("value", snap =>
    {
      var workouts = snap.val();
      for (var i = 0, len = workouts.length; i < len; i++) // Populate list.
      {
        $("#cardList").append("<li><div class='card transform'>n
        <div class='cardInfo'><h3>" + workouts[i].title + "</h3><p>10 min.</p><a class='startIt' href='timer.html'>n
        <img src='images/playIcon.png' width='70' alt='' /></a><div class='infoIcons'>n
        <img src='images/thorso.png' width='48' alt='' /><img src='images/legs.png' width='28' alt='' />n
        <img src='images/cardio.png' width='48' alt='' /></div><div class='timeIcon'>n
        <img src='images/tenMinutes.png' width='66' alt='' /></div></div>n
        <div class='disappear'><div class='playIt'><a class='playButton' href='timer.html'>n
        <img src='images/playButtonUp.png' width='100' alt='' /><img src='images/playButtonDown.png' width='95' alt='' /></a>n
        </div><div class='deleteIt'><a class='deleteButton' href='#'>n
        <img src='images/thrashButtonUp.png' width='60' alt='' />n
        <img src='images/thrashButtonDown.png' width='55' alt='' /></a></div><div class='modifyIt'>n
        <a class='modifyButton' href='#'><img src='images/cogButtonUp.png' width='100' alt=''/>n
        <img src='images/cogButtonDown.png' width='95' alt='' /></a></div></div></div></li>");
      }
    });

j查询：

  // Triggers CSS animation for cards.
  $(".card").click(function()
  {
    $(this).toggleClass("transformActive");
    $(".disappear", this).toggleClass("appear");
  });

.CSS：

/**
* ROUTINE CARDS SECTION
*
*/
/* Style cards and content */
.cards
{
  position: absolute;
  width: 100%;
  top: 60px;
  list-style: none;
  text-decoration: none;
  text-align: center;
  z-index: -1;
}
.cards li
{
  position: relative;
  width: 100%;
  padding-bottom: 10px;
}
.card
{
  position: relative;
  background-color: #ffffff;
  height: 150px;
  width: 100%;
  left: -6%;
  border-radius: 8px;
  box-shadow: 2px 2px 2px #686868;
}
.transform
{
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.transformActive
{
  background-color: #ffffff;
  height: 260px;
  width: 100%;
  box-shadow: 6px 6px 6px #888888;
}
/* CARD CONTENT SECTION */
.cardInfo
{
  position: relative;
  margin: auto;
  width: 95%;
  height: 130px;
  text-align: left;
}
.cardInfo h3
{
  position: relative;
  top: 5px;
}
.cardInfo p
{
  position: relative;
  color: black;
  text-align: right;
  top: -40px;
}
.startIt
{
  position: absolute;
  bottom: 0px;
}
.timeIcon
{
  position: absolute;
  bottom: 0px;
  left: 78%;
}
.infoIcons
{
  position: relative;
  margin: auto;
  top: -20px;
  width: 52%;
  height: 100px;
}
.infoIcons img
{
  margin-left: 6px;
}
#holder
{
  position: relative;
  width: 100%;
  height: 80px;
}
/* CARD ANIMATION */
.disappear
{
  position: relative;
  width: 95%;
  height: 40%;
  top: 8%;
  margin: auto;
  opacity: 0;
}
.appear
{
  -webkit-animation: appearFade 1.2s ease forwards;
  -moz-animation: appearFade 1.2s ease forwards;
  -o-animation: appearFade 1.2s ease forwards;
  -ms-animation: appearFade 1.2s ease forwards;
  animation: appearFade 1.2s ease forwards;
}
@keyframes appearFade
{
  0%
  {
    opacity: 0;
  }
  100%
  {
    opacity: 1;
  }
}
/* CARD OPTIONS ICONS */
.playIt
{
  position: absolute;
  left: 0px;
}
.playButton img:last-child
{
  display: none;
}
.playButton:hover img:first-child
{
  display: none;
}
.playButton:hover img:last-child
{
  display: inline-block;
  position: relative;
  left: 3px;
  top: 3px;
}
.deleteIt
{
  position: relative;
  margin: auto;
  top: 25px;
}
.deleteButton img:last-child
{
  display: none;
}
.deleteButton:hover img:first-child
{
  display: none;
}
.deleteButton:hover img:last-child
{
  display: inline-block;
  position: relative;
  left: 2px;
  top: 2px;
}
.modifyIt
{
  position: absolute;
  right: 0px;
  top: 0px;
}
.modifyButton img:last-child
{
  display: none;
}
.modifyButton:hover img:first-child
{
  display: none;
}
.modifyButton:hover img:last-child
{
  display: inline-block;
  position: relative;
  left: 0px;
  top: 3px;
}

由于.card项是在附加单击侦听器后添加的，因此它不起作用。绑定侦听器时，该元素需要存在。应使用委托事件。

将单击侦听器附加到容器元素，然后使用 event.target 作为单击的元素：

$('#cardList').on('click', '.card', (event) => {
  // $(event.target) is the element you clicked
  $(event.target).toggleClass('transformActive');
});

问题是您在添加元素之前添加单击处理程序，因此只有初始元素具有该单击事件。相反，您可以将单击处理程序添加到body但对其进行筛选。

$('body').on('click', '.card', function(){ ... }

这样，单击事件将位于整个文档上，但除非您单击了卡片，否则该函数不会触发。

所以，我怀疑问题不在于切换类，而在于点击处理程序。要使 jQuery 作用于 DOM 元素，该元素必须在站点完成初始加载时存在。

如果在加载后使用 JSON 填充内容，则无法对内容所在的 DOM 元素执行操作。

你所有的初始类都被添加到JSON内容中 - 所以它们在加载时都不存在 - jQuery对它们的存在一无所知。

您的点击定位条件必须在加载时存在，才能解决您的问题。所以，不要把 DOM 元素放在你的 JSON 中。让它们已经填充，并将 JSON 数据馈送到现有元素中。OR - 将点击事件绑定到加载时存在的更高位置的 DOM 元素。然后动态元素将能够冒泡，jQuery将有一些东西可以观察.

相关内容

最新更新

热门标签：