在第二次单击时使用 Ajax 重新加载页面答案

【问题标题】：Page reloading with Ajax at second click在第二次单击时使用 Ajax 重新加载页面
【发布时间】：2016-05-31 15:01:43
【问题描述】：

我的页面中有一个“喜欢”链接。用户可以点击喜欢或删除一个古老的喜欢。为了避免重新加载页面，我自然使用了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();
    }
}

【问题讨论】：

标签： javascript php jquery ajax symfony

【解决方案1】：

这是因为您已经替换了附加事件的第一个“a”标签。修复它的最快方法是像这样声明点击事件：

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

就是这样！

【讨论】：

谢谢。不幸的是，它仍然不起作用... :( 考虑到您所说的，也许我应该尝试更改属性而不是整个“a”标签...
是的，最好的方法是只更改您想要更改的信息，而不是整个按钮（DOM 元素）。 buttonLike.attr('title', '...').html('' + data.count);

【解决方案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>

感谢您的帮助！

【讨论】：