Selecting an element that has just been clicked JQuery

Question

I have a <div> containing a <a> tags and further divs:

        <div>
            <div class="icons">
                <div class="group popOutDisplay">
                    <a href="#" data-id="128910"><i class="fa fa-home"></i></a>
                    <a href="#" data-id="239019"><i class="fa fa-search"></i></a>
                    <a href="#" data-id="346653"><i class="fas fa-bicycle"></i></a>
                </div>
                <div class="group">
                    <a href="#"><i class="fa fa-globe"></i></a>
                </div>
                <div class="group bottom">
                    <a href="#"><i class="fa fa-trash"></i></a>
                </div>
            </div>
            <div class="content">
                <div id="128910";>
                    <p>some content</p>
                </div>
                <div id="239019";>
                </div>
                <div id="346653";>
                </div>
            </div>
       </div>

Im trying to select the data attribute on the anchor tag with jquery so that i can display the the <div> tags in <div class="content"> which have the same ID (if that makes sense?).

So far i've been able to identify the data id with

$(".group.popOutDisplay a")[0].attributes[1].value;

but this only gives the ID of the first element, due to the [0] index.

tldr: How can I get the data-ID of the <a> tag that has just been clicked?

Try with this https://api.jquery.com/data/ – therealbischero Mar 21 '18 at 12:24 — therealbischero, Mar 21 '18 at 12:24

Radonirina Maminiaina · Accepted Answer · 2018-03-21T12:44:49.110

3

Here we go:

$('.popOutDisplay a').click(function(e) {
    e.preventDefault();
    console.log($(this).data('id'));
});

Here the documentation of .data() attribute.

Demo: https://jsfiddle.net/ru4pjz3c/2/

edited Mar 21 '18 at 12:44

answered Mar 21 '18 at 12:23

Radonirina Maminiaina

6,958
4
33
60

Updated the answer with documentation of data – Radonirina Maminiaina Mar 21 '18 at 12:28

score 2 · Answer 2 · answered Mar 21 '18 at 12:29

You can use ".click()" for this. check snippet below..

$('.popOutDisplay a').click(function(e){
    e.preventDefault();
    var elID = $(this).data('id');
    console.log(elID);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<div>
            <div class="icons">
                <div class="group popOutDisplay">
                    <a href="#" data-id="128910"><i class="fa fa-home"></i></a>
                    <a href="#" data-id="239019"><i class="fa fa-search"></i></a>
                    <a href="#" data-id="346653"><i class="fas fa-bicycle"></i></a>
                </div>
                <div class="group">
                    <a href="#"><i class="fa fa-globe"></i></a>
                </div>
                <div class="group bottom">
                    <a href="#"><i class="fa fa-trash"></i></a>
                </div>
            </div>
            <div class="content">
                <div id="128910";>
                    <p>some content</p>
                </div>
                <div id="239019";>
                </div>
                <div id="346653";>
                </div>
            </div>
       </div>

Sumesh TG · Answer 3 · 2018-03-21T12:41:23.780

0

$(".group a").click(function(){
     var data=$(this).attr("data-id");
     alert(data)
});

To retrieve the value's attribute as a string without any attempt to convert it, use the attr() method.

edited Mar 21 '18 at 12:41

answered Mar 21 '18 at 12:25

Sumesh TG

2,557
2
15
29

If you're going to suggest using `.attr()` for `data-` attribute, then you should detail the difference between `.attr()` and `.data()` and why you would not use `.data()` in this case. – freedomn-m Mar 21 '18 at 12:29
Just seen your other comment - maybe a quick search? https://stackoverflow.com/questions/7261619/jquery-data-vs-attr – freedomn-m Mar 21 '18 at 12:31

score 0 · Answer 4 · answered Mar 21 '18 at 12:49

0

$(document).on("click", "[data-id]", function (event){
    event.preventDefault();
    var id = $(this).attr("data-id");

    // Apply your logic here
    // $("#" + id)
});

answered Mar 21 '18 at 12:49

Tiramonium

557
5
15

score -1 · Answer 5 · answered Mar 21 '18 at 12:31

bind click event listener on the a element container div <div class="group popOutDisplay". the reason is because click events on the a elements will bubble up to div container.

something like

$('.group.popOutDisplay').bind('click', function(e) {
    var target = e.target;
    if (target.tagName.toLowerCase() === 'a') {
        e.preventDefault(); //prevent the default action of navigating to the url
        var id = target.dataset.id;
        //you now have the id;
        $('#' + id).css('display', 'block'); //display the div
    }
});

Selecting an element that has just been clicked JQuery

5 Answers5