ajaxは正常に変更されましたが使用できません

Question

htmlファイルを使用しています。目的のタグは<a class="favorite">です。<a ="unfavorite">に変更して再度クリックすると、元の値（<a class="favorite">）、htmlの一部このようなコード：

<div class="extra content" extra_id="{{ article.article.id }}"> 
     {% if user.is_authenticated %} 
      {% if collections %} 
      {% if article.article.title in collections %} 
      <a class="unfavorite"> 
       <i class="heart icon"></i> 
       {{article.article.favorite}} 
      </a> 
      {% else %} 
       <a class="favorite"> 
       <i class="empty heart icon"></i> 
       {{article.article.favorite}} 
       </a> 
      {% endif %} 
      {% else %} 
      <a class="favorite"> 
      <i class="empty heart icon"></i> 
      {{article.article.favorite}} 
      </a> 
      {% endif %} 
     {% else %} 
      <a class="favorite"> 
      <i class="empty heart icon"></i> 
      {{article.article.favorite}} 
      </a> 
     {%endif%} 
     <span class="right floated"> 
      <a > 
      <i class="comment icon"></i> 
       {{ article.comments_num }} 
      </a> 
     </span> 
     </div> 

とjsのコードの一部：

クリック <a class="favorite">、 $(".favorite"){}実行の成功、それは <a class="unfavorite">に向ける

$(".favorite").bind("click",function(){ 
var id = $(this).parent('.extra.content').attr('extra_id'); 
$.ajax({ 
    url:"/api/favorite/", 
    data:{"extra_id":id}, 
    async:false, 
    success:function(result){ 
    if (result.status == 200) { 
    $('[extra_id='+ result.article_id +']').find('a.favorite').attr("class","unfavorite"); 
    $('[extra_id='+ result.article_id +']').find('a.unfavorite').html("<i class='heart icon'></i>"+result.favorite); 

    } 

    if (result.status == 10020){ 
    location.href="accounts/login/"; 
    } 
}}); 
}); 

$(".unfavorite").bind("click",function(){ 
var id = $(this).parent('.extra.content').attr('extra_id'); 
$.ajax({ 
    url:"/api/unfavorite/", 
    data:{"extra_id":id}, 
    async:false, 
    success:function(result){ 
    if (result.status == 200) { 
     $('[extra_id='+ result.article_id +']').find('a.unfavorite').attr("class","favorite"); 
     $('[extra_id='+ result.article_id +']').find('a.favorite').html("<i class='empty heart icon'></i>"+result.favorite); 

    // $('[extra_id='+ result.id +']').find('i.up').attr("class","thumbs up icon"); 
    } 
    }} 
); 
}); 

、再度それをクリックし、それはを実行する必要がありますがまだ実行されていないのに、まだ$(".favorite"){}を実行しています。なぜですか？

Answer 1

あなたはevent-delegation使用する必要があります： -

$('.extra.content').on("click",".unfavorite",function(){ 

    //....rest code as it is 

}); 

注： - すべての-.bind()の代わりに.on()を使用します。

参考： - Is jquery .bind() deprecated?

Answer 2

私はあなたのクラス属性が更新取得されていないと思います。あなたの関数内の行の下に追加

試してみてください。$で

（ "お気に入り。"）（バインド）;。

$(this).addClass('unfavorite').removeClass('favorite'); 

$（ "。unfavorite"）。bind（）;

$(this).addClass('favorite').removeClass('unfavorite');