防止重新加载

Question

我不是jQuery专家，但是试图创建一个（简单的）函数，用户可以在该函数上简单地单击一个按钮来添加项目。经过很多失败之后，我设法创建了以下代码：

jQuery

    function vote(_obj) {    
        $.ajax({  
            type: "POST",  
            data: "id=" + $(_obj).attr("id"), 
            url: "vote.php"
        });  
    }

    $('.favorite').click(function() {
        vote(this);
    });

因此，每次用户单击时，页面都会刷新（并自动跳到页面顶部）。我已经尝试添加一个e.preventDefault（）;但没有任何结果。

HTML / CSS

<a href="" id="a8d186542e782684c0b43b36b994e3eb" class="favorite"><i class="fas fa-heart" style="color:#dc3545"></i></a>

亲切的问候！

Answer 1

只需阻止默认的点击操作即可。这样可以防止表单提交或链接跟随其href URL或事件发生时该元素的默认值

$('.favorite').click(function(event) {
    event.preventDefault();
    vote(this);
});

Answer 2

防止重新加载

您可以使用如下的preventDefault（）函数来防止浏览器重新加载：

在您的Javascript中：

$('.favorite').click(function(e) {
    e.preventDefault();
    vote(this);
});

您的a标签没有href值，因此看起来就像是重新加载页面（但它正在浏览到同一页面）。

更新投票值

要更新投票值，可以使用jQuery的Ajax调用的success()函数，并根据需要更新值（例如：仅从调用的响应中增加或获取价值），使用选择器来更新正确的值

$.ajax({  
    type: "POST",  
    data: "id=" + $(_obj).attr("id"), 
    url: "vote.php",
    success : function(response){
        // update your value here, using selector
        // ex: $('.vote-' + $(_obj).attr('id')).val(response.vote)
    },
    error: function(response) {
        // handle error
    }
});

Answer 3

除了e.preventDefault()之外，您还可以在jquery事件处理程序中使用return false;。

$('.favorite').click(function() {
    vote(this);
    return false;
});

或者，从语义上讲，这个应该实际上是<button> 而不是<a>，将其设为type='button'，除了代码之外，它不会做任何其他事情（默认值为type=submit，因此需要指定的type=，否则将尝试提交您的表单）。您可能需要添加一些CSS以使其看起来像“按钮”一样。

<button type='button' class="favorite">
    <i class="fas fa-heart" style="color:#dc3545"></i>
</button>

使用相同的现有代码

如何防止页面在jQuery中“跳到顶部”？

3 个答案:

防止重新加载

更新投票值