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

Question

I am having a problem. Below is my code:

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

When this anchor tag whose id is find is clicked the alert "Clicked" appears then the whole page is reloaded. I am getting name, location and city values from p tags separately.

Also when I keep only one assignment and discard other two then page reloading stops and only alert occurs. This is the beginning as I have to send this collected data to via AJAX to controller function but first I want to stop reloading the page. What am I doing wrong?

PS: I'm very new to jQuery and only know few of its basics. Please help.

Answer 1

You need to stop the default behaviour of the link (ie. changing the URL) by using event.preventDefault , try this:

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

Answer 2

Rename your location variable to location1 . i think it refer to browser location.

Answer 3

try this. simple and easy

Modify the href attribute as given below

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

Answer 4

To stop the page reload and navigation behavior of anchor tag, you can use javascript:void(0) or event.preventDefault()

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

Or

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

Now your page will not reload on click on this anchor tag.