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"){}，但不会运行{{1} }}，为什么呢？

Answer 1

您必须使用event-delegation： -

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

   //....rest code as it is

});

注意： - 每个地方都使用.on()代替.bind()。

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

Answer 2

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

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

在$（＆＃34; .favorite＆＃34;）。bind（）;

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

在$（＆＃34; .unfavorite＆＃34;）。bind（）;

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

ajax成功更改html标签，但无法使用

2 个答案: