Question

我正在利用jQuery的.toggleClass()函数在多个<div>元素中创建一个收藏夹按钮，每个元素都有一个<a>元素和一个<i>元素。我正在使用来自Font Awesome的2个图标，我在那些类之间来回切换。

这完全正常，如JSFiddle所示。

我遇到的问题是当我使用PHP foreach循环动态生成这些元素时，只有生成元素的类切换的一半。

HTML：

<div>
  <a class="h-icon" href="#">
    <i class="fa fa-heart-o" aria-hidden="true"></i>
  </a>
</div>

<div>
  <a class="h-icon" href="#">
    <i class="fa fa-heart-o" aria-hidden="true"></i>
  </a>
</div>

<div>
  <a class="h-icon" href="#">
    <i class="fa fa-heart-o" aria-hidden="true"></i>
  </a>
</div>

<div>
  <a class="h-icon" href="#">
    <i class="fa fa-heart-o" aria-hidden="true"></i>
  </a>
</div>

<div>
  <a class="h-icon" href="#">
    <i class="fa fa-heart-o" aria-hidden="true"></i>
  </a>
</div>

<div>
  <a class="h-icon" href="#">
    <i class="fa fa-heart-o" aria-hidden="true"></i>
  </a>
</div>

jQuery：

$(".h-icon").on("click", function(e) {
  e.preventDefault();

  $("i", this).toggleClass("fa-heart fa-heart-o");

  $.ajax({
    url: $(this).prop("href")
  })
  return false;
});

PHP：

<?php

    foreach($array as $row) {

        $favorite = $row['favorite'];

        if($favorite == false) {

            echo '<div><a class="h-icon" href="#"><i class="fa fa-heart-o" aria-hidden="true"></i></a></div>';

        }
        else {

            echo '<div><a class="h-icon" href="#"><i class="fa fa-heart" aria-hidden="true"></i></a></div>';

        }

    }

?>

Answer 1

当您动态添加更多元素时，需要再次注册click侦听器，或使用动态事件侦听器。

$(document).on("click", ".h-icon", function(e) {
    // ...
});

<强> Working example.

为什么只有一半的元素能够被切换？

1 个答案: