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

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.

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

Why are only half the element's classes able to be toggled?

html

javascript

php

jquery

font-awesome

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

Why are only half the element's classes able to be toggled?

html

javascript

php

jquery

font-awesome

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