Website jumps to top after adding to with jquery

Question

i use jquery to add a full line to an existing table. Unfortunately the website jumps to the very top after this (as if i would reload it completely).

My code is:

<a href="#" onclick="addParam()">foo</a>

And the JS:

    function addParam() {
        $('#request_params tbody').append('<tr><td><input class="form-control paramcomplete" type="text" name="input_param_name" size="40" /></td><td><input class="form-control" type="text" name="input_param_value" size="40"/></td><td> <a href="#" onclick="removeParam(this)"><img src="/SequenceControl/pics/remove.png" style="width:20px" /></a></td></tr>');

        return false;
    }

Is there a possibility to make it stay where it is when i clicked on the link?

Pranav Patel · Answer 1 · 2017-06-23T10:05:25.490

4

also, you can do like href="javascript:void(0);"

or you can do like following

function addParam(e)
{
    // do your stuff
    e.preventDefault(); // Cancel the default action
});

edited Jun 23 '17 at 10:05

answered Jun 23 '17 at 09:55

Pranav Patel

1,852
11
26

1

nice, it could also be a solution – Sampgun Jun 23 '17 at 09:55
1

You are missing the `event` passing in `addParam()` => `addParam(e)` – prasanth Jun 23 '17 at 10:04

score 1 · Answer 2 · answered Jun 23 '17 at 09:51

1

Just remove the href tag from the HTML. You don't need it!

answered Jun 23 '17 at 09:51

Sampgun

2,660
1
17
35

Are you sure it will work? For me it doesn't make a link like that. – EKons Jun 23 '17 at 09:53
I'm sure it works and it doesn't need to be a link to work. He could use any element to do that... – Sampgun Jun 23 '17 at 09:54

score 0 · Accepted Answer · answered Jun 23 '17 at 09:52

0

Just remove href="#". It causes the jump to top

What is href="#" and why is it used?

answered Jun 23 '17 at 09:52

Constantine

504
4
15

score 0 · Answer 4 · answered Jun 23 '17 at 09:57

You need to cancel out the default action so use onclick="return addParam()",

However I would recommend you to use correct semantic element; <button> instead of anchor and also as you are using jQuery use unobtrusive event handler

HTML

<button class="addRow" type="button" onclick="addParam()">foo</button >

Script

$('.addRow').on('click', function(){
     //Your code
})

Arvind · Answer 5 · 2017-06-23T12:34:12.540

0

You have mentioned href="#" in anchor tag, which doesn't specify an id name, so clicking an anchor with href="#" will move the scroll position to the top.

remove href attribute from anchor tag.

<a onclick="addParam()">foo</a>

edited Jun 23 '17 at 12:34

answered Jun 23 '17 at 10:00

Arvind

19
5

Website jumps to top after adding to with jquery

5 Answers5