Jquery Toggleクラスの値が次のJquery関数で選択されない

Question

私は2つの関数をお気に入りに追加しています。お気に入りから削除すると、クリックに代わって機能するはずです...しかし、ある関数がクラスを変更しても、 jqueryのは、アラートの

// On Search Property Results Page - Add to Favorite Button (Heart) 

     $('.addtofavorite').click(function() { 
      alert("add"); 
      var reference = this; 
      $(reference).toggleClass("addtofavorite alreadyfavorite"); 

     }); 


     // On Search Property Results Page - Remove from Favorite Button (Heart) 
     $('.alreadyfavorite').click(function() { 
      alert("delete"); 
      var reference = this; 
      $(reference).toggleClass("addtofavorite alreadyfavorite"); 

    }); 

のjQuery

...

HTML

<a href="#"><img class="<?php if($favorite == 1){ echo 'alreadyfavorite';} else { echo 'addtofavorite';} ?>" src="../images/system/addtofavorite.png"></a> 

他の機能を実行するように変更されたクラスの値を選択することができませんhouldは

Answer 1

... CSSが変更されますが、警告が同じまま

...その後アラートは、CSSは変更する必要がありそう言うべき、その後、CSSは変更する必要があり、削除を言う必要があり、その後、CSSは、警告変更する必要があり、追加言います

$('.addtofavorite').click(function() {を$(document).on('click', '.addtofavorite', function() {に変更した場合は、希望どおりに機能します。

注：注：CSSはこの例を表示するためのものです。

は、それはあなたが一度にそれらを1つだけ持っているので、ありきたりの要素に「クリック」結合している

$(document).on('click', '.addtofavorite', function() { 
 
    alert("add"); 
 
    var reference = this; 
 
    $(reference).toggleClass("alreadyfavorite addtofavorite"); 
 

 
}); 
 

 

 
// On Search Property Results Page - Remove from Favorite Button (Heart) 
 
$(document).on('click', '.alreadyfavorite', function() { 
 
    alert("delete"); 
 
    var reference = this; 
 
    $(reference).toggleClass("alreadyfavorite addtofavorite"); 
 

 
});

.alreadyfavorite { 
 
    height: 50px; 
 
    width: 50px; 
 
    background-color: yellow 
 
} 
 
.addtofavorite { 
 
    height: 50px; 
 
    width: 50px; 
 
    background-color: red 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#"> 
 
    <img class="alreadyfavorite" /> 
 
</a>

Answer 2

に役立ちます願っています。親にもバインド

ではなく

 $('body').on("click",".addtofavorite", function() { 
      console.log("add"); 
      var reference = this; 
      $(reference).toggleClass("addtofavorite alreadyfavorite"); 
     }); 


     $('body').on("click",".alreadyfavorite", function() { 
      console.log("delete"); 
      var reference = this; 
      $(reference).toggleClass("addtofavorite alreadyfavorite"); 

    }); 

http://codepen.io/Maher-Fa/pen/KaQwZX?editors=1010