ajax change html tag successfully，but can not be used

Question

I have a html file , purpose is click tag <a class="favorite">,turn to <a ="unfavorite">,then click it again ,it should change back to the original value(<a class="favorite">), part of html code like this:

  <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>

and part of js code:

$(".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");
    }
  }}
);
 });

when click <a class="favorite">, $(".favorite"){} runs success, it turn to <a class="unfavorite">, then click it again ,it should run $(".unfavorite"){}, but not ,still run $(".favorite"){},why?

Answer 1

You have to use event-delegation:-

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

   //....rest code as it is

});

Note:- use .on() instead of .bind() every-where.

Reference:- Is jquery .bind() deprecated?

Answer 2

I think your classes attributes are not getting updated.

Try adding below lines in your functions :

In $(".favorite").bind();

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

In $(".unfavorite").bind();

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