how to get the data attribute of parent element even if the child element is clicked

Question

I'm trying to get the data attribute of a div when clicked in Backbone events(View).

I'm able to achieve this if I click on the div listItem but if I was to click on the child element span it will fail because $(e.target) will be the span.

So how do I get the data attribute of the parent element, even if the child element is clicked?

<div class="listItem" data-showInfo="true">
    <span class="arrow"></span>
</div>

events:{
  "click .listItem": function(e) {

    var $listItem= $(e.target);

    console.log($listItem.data('showInfo'));
  }
}

is your div.listItem in the scope of Backbone View's el ? Just to get clarity. — Venkat Kotra, Apr 10 '13 at 11:35

score 10 · Accepted Answer · answered Apr 10 '13 at 12:13

10

Use event.currentTarget instead of event.target, it will be set to the .listItem selector independently of the DOM node you click

var V = Backbone.View.extend({
    events: {
        'click .listItem' : function(e) {
            console.log($(e.currentTarget).data('showinfo'));
        }
    }
});

And a demo http://jsfiddle.net/nikoshr/QyP3Z/

answered Apr 10 '13 at 12:13

nikoshr

32,926
33
91
105

how to do the same for vanilla JS ? – Pawan Deore Mar 27 '22 at 12:35
1

@PawanDeore Probably something like this https://stackoverflow.com/a/58855262/1071630 – nikoshr Mar 28 '22 at 08:48

score 6 · Answer 2 · answered Apr 10 '13 at 11:09

6

You can do it like this:

$('.arrow').click(function(){
alert($(this).parent().attr('data-showInfo'));
});

Your example is in this JSFiddle

answered Apr 10 '13 at 11:09

Debopam Mitra

1,842
4
27
51

score 2 · Answer 3 · answered Apr 10 '13 at 11:48

2

events:{    
    "click .arrow": function(){
        console.log($(this).parent('.listItem').attr('data-showInfo'));
    };
}

answered Apr 10 '13 at 11:48

Venkat Kotra

10,413
3
49
53

how to get the data attribute of parent element even if the child element is clicked

3 Answers3