jquery函数在click事件上重新加载页面

Question

我遇到了问题。 以下是我的代码：

$(function() {  
    $('#find').on("click",function(){
        name = $('#q_name').text();
        location = $('#q_location').text();
        city = $('#q_city').text();
        alert("Clicked");
    });
});

当点击find id锚标签时，会出现警告“Clicked”，然后重新加载整个页面。 我分别从p标签获取名称，位置和城市值。

此外，当我只保留一个分配并丢弃其他两个分配时，页面重新加载停止并且仅发生警报。 这是开始，因为我必须通过AJAX将这些收集的数据发送到控制器功能，但首先我想停止重新加载页面。 我究竟做错了什么？

PS：我对jQuery很新，只知道它的基础知识。 请帮忙。

Answer 1

您需要使用event.preventDefault停止链接的默认行为（即更改URL），请尝试以下操作：

$('#find').on("click", function(e){
    e.preventDefault();
    name = $('#q_name').text();
    location = $('#q_location').text();
    city = $('#q_city').text();
    alert("Clicked");
});

Answer 2

将您的location变量重命名为location1 。 我认为它指的是浏览器位置。

Answer 3

尝试这个。 简单易行

修改href属性，如下所示

<a href="javascript:void(0)" onclick="whateverFunction()" >

Answer 4

要停止锚标记的页面重新加载和导航行为，可以使用javascript:void(0)或event.preventDefault（）

<a href="javascript:void(0)" id="find">Click</a>

要么

$(function() {  
    $('#find').on("click",function(e){
        e.preventDefault()
        name = $('#q_name').text();
        location = $('#q_location').text();
        city = $('#q_city').text();
        alert("Clicked");
    });
});

现在，点击此锚标记后，您的页面将不会重新加载。