Javascript ajax成功更改html标记，；但不能使用

我有一个html文件，目的是单击标记

，转到

，然后再次单击它，它应该更改回原始值（

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

{%if user.u经过身份验证%}
{%if集合%}
{%if集合中的article.article.title%}
{{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("<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”）.bind（“单击”，函数（）{
var id=$（this.parent（'.extra.content'）.attr（'extra_id'）；
$.ajax({
url:“/api/favorite/”，
数据：{“extra_id”：id}，
async:false，
成功：功能（结果）{
如果（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”）；
}
如果（result.status==10020）{
location.href=“accounts/login/”；
}
}});
});
$（“.unfavorite”）.bind（“单击”，函数（）{
var id=$（this.parent（'.extra.content'）.attr（'extra_id'）；
$.ajax({
url:“/api/unfavorite/”，
数据：{“extra_id”：id}，
async:false，
成功：功能（结果）{
如果（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+']'）。查找（'i.up'）.attr（“类”，“竖起大拇指图标”）；
}
}}
);
});

当点击

，

$（“.favorite”）{}

运行成功时，它会转到

，然后再次点击，它应该运行

$（“.unfavorite”）{}

，但不是，仍然运行

$（.favorite”）{

，为什么？

您必须使用：-

注意：-在任何地方使用

.on（）

而不是

.bind（）

参考：-

您必须使用：-

注意：-在任何地方使用

.on（）

而不是

.bind（）

---

参考资料：-

我认为您的类属性没有得到更新

尝试在函数中添加以下行：

美元（“.favorite”）.bind（）

美元（“.unfavorite”）.bind（）

---

我认为您的类属性没有得到更新

尝试在函数中添加以下行：

美元（“.favorite”）.bind（）

美元（“.unfavorite”）.bind（）

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

   //....rest code as it is

});

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

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