頁面重新加載Ajax在第二次點擊

我有一個「喜歡」鏈接在我的頁面。用戶可以點擊喜歡或刪除一個古老的喜歡。爲了避免重新加載頁面，我自然使用了ajax方法。請注意，這是我第一次使用ajax。它在第一次點擊鏈接時有效，但如果第二次點擊則不起作用。第二次重新加載頁面。頁面重新加載Ajax在第二次點擊

我不明白爲什麼。請幫忙嗎？

注意：我正在使用Symfony2。

我的樹枝和jQuery腳本：

<a href="" class="buttonLike{{ article.id }}" style="text-decoration: none" title="{% if like == 'true' %}Retirer&nbsp;des&nbsp;coups&nbsp;de&nbsp;coeur{% else %}Votez&nbsp;pour&nbsp;ce&nbsp;contenu{% endif %}" data-toggle="tooltip" data-placement="top"><i class="fa fa-heart {% if like == 'true' %}text-default{% endif %}"></i> {{ article.usersLike|length }}</a> 

<!-- Ajax sur les boutons Like et Favoris --> 
<script type="text/javascript" src="{{ asset('assets/plugins/jquery.min.js') }}"></script> 
{% if article.isPublic %} 
    <script> 
     $("a.buttonLike{{ article.id }}").click(function (e) { 
      e.preventDefault(); 
      var buttonLike = $('a.buttonLike{{ article.id }}'); 
      $.ajax({ 
       url: '{{ path('article_like', {'id': article.id}) }}', 
       type: 'GET', 
       dataType: 'json', 
       success: function (data, statut) { 
        console.log(data); 
        if (data.bool == true) { 
         buttonLike.replaceWith("<a href='' class='buttonLike{{ article.id }}' style='text-decoration: none' title='Votez&nbsp;pour&nbsp;ce&nbsp;contenu' data-toggle='tooltip' data-placement='top'><i class='fa fa-heart'></i>" + data.count + "</a>"); 
        } else { 
         buttonLike.replaceWith("<a href='' class='buttonLike{{ article.id }}' style='text-decoration: none' title='Retirer&nbsp;des&nbsp;coups&nbsp;de&nbsp;coeur' data-toggle='tooltip' data-placement='top'><i class='fa fa-heart text-default'></i>" + data.count + "</a>"); 
        } 
       }, 
       error: function (resultat, statut, erreur) { 
        alert("Une erreur s'est produite."); 
       } 
      }); 
     }); 
    </script> 
{% endif %}

我的控制器：

/** 
* Add or delete a like 
* @Security("has_role('ROLE_USER')") 
* @Route("/{id}/likes", name="article_like") 
* @Method("GET") 
*/ 
public function likesAction(Article $article) { 

    if ($article->getIsPublic()) { 

     $user = $this->container->get('security.token_storage')->getToken()->getUser(); 

     $usersLikes = $article->getUsersLike(); 
     $countLikes = count($usersLikes); 
     $bool = false; 

     if ($countLikes != null) { 
      foreach ($usersLikes as $userlike) { 
       if ($user == $userlike) { 
        $em = $this->getDoctrine()->getManager(); 

        $article->removeUsersLike($user); 
        $user->removeLike($article); 
        $em->flush(); 

        $countLikes = $countLikes - 1; 
        $bool = true; 
       } 
      } 
     } 

     if ($bool == false) { 
      $em = $this->getDoctrine()->getManager(); 

      $article->addUsersLike($user); 
      $user->addLike($article); 
      $em->flush(); 

      $countLikes = $countLikes + 1; 
     } 

     $response = new JsonResponse(); 
     return $response->setData(array('count' => $countLikes, 'user' => $user->getId(), 'userslikes' => $usersLikes, 'bool' => $bool)); 
    } else { 
     throw $this->createAccessDeniedException(); 
    } 
}

來源

2016-05-31 Melody

這是因爲你已經更換了第一個「一」的標籤，其上連接的事件。解決它的最快方法是declarate單擊事件是這樣的：

$("a.buttonLike{{ article.id }}").on('click', function (e) { 
 
    // the rest of event code here... 
 
}

這就是它！

來源

2016-05-31 15:09:18

謝謝。不幸的是，它仍然無法正常工作... :(考慮到你在說什麼，也許我應該嘗試更改屬性，但不是整個「a」標籤... – Melody

是的，最好的方法是隻更改您想要更改的信息，而不是整個按鈕（DOM元素） buttonLike.attr（'title'，'...'）。html（''+ data.count）; –

非常感謝:) – Melody

考慮到瓦倫丁在談論我正在取代整個「a」標籤的事實。我致力於僅替換所需的屬性。它終於奏效了！

新的jQuery腳本：

<script> 
    $("a.buttonLike{{ article.id }}").on('click', function (e) { 
     e.preventDefault(); 
     var buttonLike = $('a.buttonLike{{ article.id }}'); 
     var countLike = $('span.countLike{{ article.id }}'); 
     $.ajax({ 
      url: '{{ path('article_like', {'id': article.id}) }}', 
      type: 'GET', 
      dataType: 'json', 
      success: function (data, statut) { 
       console.log(data); 
       if (data.bool == true) { 
        buttonLike.attr('title', 'Votez&nbsp;pour&nbsp;ce&nbsp;contenu'); 
       } else { 
        buttonLike.attr('title', 'Retirer&nbsp;des&nbsp;coups&nbsp;de&nbsp;coeur'); 
       } 
       countLike.text(data.count); 
      }, 
      error: function (resultat, statut, erreur) { 
       alert("Une erreur s'est produite."); 
      } 
     }); 
    }); 
</script>

感謝您的幫助！

來源

2016-05-31 15:26:55 Melody

頁面重新加載Ajax在第二次點擊

回答

相關問題