javascript - ajax修改html标签成功，但无法使用

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代码:

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

当点击<a class="favorite">时, $(".favorite"){}运行成功，显示<a class="unfavorite"> ，然后再次单击它，它应该运行 $(".unfavorite"){} ，但不是，仍然运行$(".favorite"){} ，为什么？

Answer 1

您必须使用event-delegation :-

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

   //....rest code as it is

});

注意:- 到处使用 .on() 而不是 .bind()。

引用:- Is jquery .bind() deprecated?