html不能更改的标签,ajax成功更改html标签，但无法使用

我有一个html文件，目的是点击代码，转到，然后再次点击它，它应该更改回原始值()，部分像这样的HTML代码：

{% if user.is_authenticated %}

{% if collections %}

{% if article.article.title in collections %}

{{article.article.favorite}}

{% else %}

{{article.article.favorite}}

{% endif %}

{% else %}

{{article.article.favorite}}

{% endif %}

{% else %}

{{article.article.favorite}}

{%endif%}

{{ article.comments_num }}

和js代码的一部分：

$(".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(""+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(""+result.favorite);

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

}

}}

);

});

点击后，$(".favorite"){}成功运行，转向，然后再次点击它，它应该运行$(".unfavorite"){}，但不会运行{{1} }}，为什么呢？