How to prevent a click on a '#' link from jumping but still execute the rest of the code

Question

I'm trying to make a clickable <td>, end up with below code :

HTML :

<table class="coolTable">
   <tr>
       <td>      
           <a id='parent1' href='#child1' class="parent">G</a>
           <div id="child1" class="child child-dropdown"></div>
       </td>
   </tr>
   <tr>
       <td>
           <a id='parent2' href='#child2' class="parent">C</a>
           <div id="child2" class="child child-dropdown"></div>
       </td>
   </tr>
</table>

JQUERY :

$(document).ready(function(){
    $(".parent").click(function() {
        $(this).parent(".child").empty();
        var data="<p>A</p><p>B</p>"
        /* Get input value on change */
        var inputVal = $(this).val();
        var resultDropdown = $(this).siblings(".child");
        // Display the returned data in browser
        resultDropdown.html(data);
    });

    $(document).on("click", ".child p", function(){
        $(this).parents(".parent").find('a').val("A");
        $(this).parent(".child").empty();
    });
});

CSS :

a {
    color:white;
    text-decoration:none;
}

.child p {
    margin: 0;
    padding: 5px 8px;
    border: 1px solid #CCCCCC;
    cursor: pointer;
    background : white;
}

.child p:hover {
    background: #f2f2f2;
}

.child-dropdown {
    position: absolute;
    display: none;
    z-index: 9;
    color: red;
}

.child-dropdown:target {
    display: block;
}



table.coolTable td {
    background-color: green;
    color: green;
    margin: 0;
    padding: 5px 8px;
}

table.coolTable td:hover {
    background-color: green;
    color: green;
}

td a {
    display: block;
    width: 100%;
}

https://jsfiddle.net/kakatua/cnej7dfs/

If i clicked a <td> it will execute the rest of the code and show me an option for me to replace the innerHTML of an <a>.

but when i implemented this on the actual web page, when i clicked the <td> it will jump to the bottom of the page (and will show my dropdown list).

i dont want the page to jump after clicked the <td>

i've used preventDefault, a="#/", and yes it will not jump, but also, its not returning my dropdown list.

is there any way to prevent this jumping thing but still execute my dropdown list?

or anyone can suggest me to make clickable <td> without using <a>

Thanks!

I believe what you need is to stop the propagation of the event, with `event.stopPropagation();` instead of `event.preventDefault();` this answer https://stackoverflow.com/a/1164254/271433 has more info about the differences. — Pedro Costa, Nov 18 '19 at 12:20
Quick fix: return false from your `$("a").click(function() { .... return false; });` — freedomn-m, Nov 18 '19 at 12:20
Possible duplicate: https://stackoverflow.com/questions/3252730/how-to-prevent-a-click-on-a-link-from-jumping-to-top-of-page?rq=1 — freedomn-m, Nov 18 '19 at 12:22
By the way, the fiddle also demonstrates the scrolling problem if you add enough content after the table to make a scrollbar appear. — Mr Lister, Nov 18 '19 at 12:23
Does this answer your question? [How to prevent a click on a '#' link from jumping to top of page?](https://stackoverflow.com/questions/3252730/how-to-prevent-a-click-on-a-link-from-jumping-to-top-of-page) — Clyde Lobo, Nov 18 '19 at 12:26
@PedroMaiaCosta `event.stopPropagation();` is not working for me — Danny Bastian, Nov 18 '19 at 12:35
@freedomn-m `$("a").click(function() { .... return false; });` with this, the page will not jump but also the dropdown list not shown. [link](https://stackoverflow.com/questions/3252730/how-to-prevent-a-click-on-a-link-from-jumping-to-top-of-page?rq=1) is not answering — Danny Bastian, Nov 18 '19 at 12:39
_“end up with below code :”_ - code relevant to your question belongs directly into your question, in text form and properly formatted (or as a stack snippet, when applicable) - not just dumped onto an external platform. — 04FS, Nov 18 '19 at 12:40
Your dropdowns becoming visible is due to `.child-dropdown:target` - but for that to work, the `#childX` anchor has to actually show at the end of the current document URL, and that causes jumping to that element at the same time. Since what you have created does not work at all without JavaScript, there is no need to handle this particular part using CSS only - so replace that rule with something that makes the dropdown visible via JavaScript, when the trigger link gets clicked. — 04FS, Nov 18 '19 at 12:44
in this code a lot of problems, `e.preventDefault();` works properly, your code is broken... — Ivan Karaman, Nov 18 '19 at 12:45
Try not to use `` HTML tag for this purposes. First of all it's not accessible. Second of all, anchors should mainly be used for the navigation outside of the page. Try to use ` — Konrud, Nov 18 '19 at 12:45
I added comments in code, `preventDefault()` disables default browser logic what is a part of changing location hash that you uses for showing your dropdown, in this case, you should manually change hash...https://jsfiddle.net/user1701/3dc1rq0w/ — Ivan Karaman, Nov 18 '19 at 12:56
I have updated my jsfiddle, removed you using `val` method, it uses only for form elements and added data attributes to save selected and use it somewhere late — Ivan Karaman, Nov 18 '19 at 13:10
@IvanKaraman Hi, Thank you for the fixed code. this works for me, sorry for the broken code, i'm new with jQuery. — Danny Bastian, Nov 19 '19 at 08:56

Ivan Karaman · Answer 1 · 2019-11-19T10:17:52.033

Updated your code, removed the using of the method val that uses only for forms, removed showing dropdown by adding hash in the link, it was replaced just adding class active that makes dropdown visible. PS Sorry for my bad English...

$(document).ready(function(){
  $(".parent").click(function(e) {
    e.preventDefault();
    const $link = $(this);
    const data="<p>A</p><p>B</p>"
    const inputVal = $link.data('selected', '');
    const resultDropdown = $link.siblings(".child");
    
    resultDropdown.html(data).addClass('active');
  });
  $(document).on("click", ".child p", function(){
   const $selected = $(this);
    const $link = $selected.parents('td').find('.parent');
    
    $link.text($selected.text());
    $link.data('selected', $selected.text());
    $selected.parent(".child").removeClass('active');
    
  });
});

a {
    color:white;
    text-decoration:none;
}

.child p{
    margin: 0;
    padding: 5px 8px;
    border: 1px solid #CCCCCC;
    cursor: pointer;
    background : white;
}
.child p:hover{
    background: #f2f2f2;
}

.child-dropdown{
 position:absolute;
 display:none;
 z-index:9;
 color:red;
}

.child-dropdown.active{
  display:block;
}



table.coolTable td {
    background-color:green;
    color:green;
    margin: 0;
    padding: 5px 8px;
}

table.coolTable td:hover {
    background-color:green;
    color:green;
}

td a {
    display:block;
    width:100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="coolTable">
   <tr>
   <td>      
   <a id='parent1' href='#child1' class="parent">G</a>
   <div id="child1" class="child child-dropdown"></div>
   </td>
   </tr>
   <tr>
   <td><a id='parent2' href='#child2' class="parent">C</a>
   <div id="child2" class="child child-dropdown"></div></td>
   </tr>
</table>

score -1 · Answer 2 · answered Nov 18 '19 at 12:23

-1

Please add This new 2 css

   table.coolTable td {
        position: relative;  
    }
    .child-dropdown { 
        top: 0px;
        left: 29px;
    }

answered Nov 18 '19 at 12:23

Piyush Marvaniya

2,496
2
16
28

score -1 · Answer 3 · answered Nov 18 '19 at 12:30

By Using Anchor Tag(): Use "javascript:void(0)" and id to write click function in JavaScript like following:

<a href="javascript:void(0)" id="toCallFunction">login</a>

$('#toCallFunction').click(function(){
    doSomething();
    alert('something');
}

How to prevent a click on a '#' link from jumping but still execute the rest of the code

3 Answers3