javascript - 为什么只有一半的元素类别可以切换？

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.