Question

我有一个＆＃34;喜欢＆＃34;链接在我的页面中。用户可以点击喜欢或删除古代的喜欢。为了避免重新加载页面，我自然使用了ajax方法。请注意这是我第一次使用ajax。它在第一次点击链接时起作用，但如果再次点击则不行。第二次重新加载页面。

我不明白为什么。有什么帮助吗？

注意：我正在使用Symfony2。

我的twig和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();
    }
}

Answer 1

这是因为你已经取代了第一个＆＃34; a＆＃34;标记附加事件。修复它的最快方法是声明click事件，如下所示：

＆＃13;

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

＆＃13;

那就是它！

Answer 2

考虑到Valentin所说的事实，我正在取代整个“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>

感谢您的帮助！

二次点击时使用Ajax重新加载页面

2 个答案: