Seite neu laden mit Ajax beim zweiten Klick

Question

Ich habe einen "wie" -Link auf meiner Seite. Der Benutzer kann klicken, um ein altes ähnliches zu mögen oder zu entfernen. Um das erneute Laden der Seite zu vermeiden, verwendete ich natürlich eine Ajax-Methode. Bitte beachten Sie, dies ist mein erstes Mal mit Ajax. Es funktioniert beim ersten Klick auf den Link, aber nicht, wenn Sie ein zweites Mal klicken. Beim zweiten Mal wird die Seite neu geladen.

Ich verstehe nicht warum. Irgendwelche Hilfe bitte?

Hinweis: Ich arbeite mit Symfony2.

mein Zweig und jquery Skript:

<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 %} 

mein Controller:

/** 
* 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(); 
    } 
} 

Answer 1

Dies ist, weil Sie das erste "ein" Tag, an dem das Ereignis angebracht ersetzt haben. Der schnellste Weg, um es zu beheben ist das Click-Ereignis wie dieses declarate:

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

Das ist es!

Answer 2

In Anbetracht dessen, was Valentin über die Tatsache sagte, dass ich das gesamte "a" -Tag ersetzte. Ich habe nur die benötigten Attribute ersetzt. Und es hat endlich funktioniert!

das neue jquery Skript:

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

Danke für die Hilfe!