要素のクラスの半分しか切り替えられないのはなぜですか？

Question

私は、要素と<i>要素を持つ複数の<div>要素の中にお気に入りボタンを作成するためにjQueryの.toggleClass()関数を利用しています。私は、フォント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.