How to access to data attribute handling different input?

Question

I have the following list:

<ul class="nav nav-pills nav-pills-warning nav-pills-icons justify-content-center" role="tablist">
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" data-role-slug="admin" href="#" "="" role="tablist">
            <i class="material-icons">supervisor_account</i> Admins                   
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link active show" data-toggle="tab" data-role-slug="operator" href="#" role="tablist">
            <i class="material-icons">person</i> Operators                   
        </a>
    </li>
</ul>

I need to get the attribute data-role-slug I actually get the value in the following way:

$('a[data-role-slug]').on('click', function (e) {
    let roleSlug = $(e.target).data('role-slug');
    console.log(roleSlug);
});

the method works well, the only problem happen when the user click on the <i> tag inside the <a> tag, in that case the roleSlug will be undefined.

Is there a way to handle this issue without hard code?

charlietfl · Accepted Answer · 2019-08-03 18:50:32Z

2

Just use this inside the event handler. It will be the <a> instance the event occurred on regardless of what child is targeted

Or alternatively e.currentTarget will return the same instance as well

$('a[data-role-slug]').on('click', function (e) {
    let roleSlug = $(this).data('role-slug');
             // OR $(e.currentTarget).data('role-slug');
    console.log(roleSlug);
});

edited Aug 3, 2019 at 18:50

answered Aug 3, 2019 at 18:35

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Morphyish · Accepted Answer · 2019-08-03 18:34:26Z

-1

That's because the target of an event is the element that actually received it, not the one is bubbled up to.

However you can try to be sneaky, maybe try something like this ?

$('a[data-role-slug]').each((index, element) => {
    element.on('click', () => {
        let roleSlug = element.data('role-slug');
        console.log(roleSlug);
    });
});

Alternatively you can use the .parent method to find the right element

$('a[data-role-slug]').on('click', function (e) {
    let roleSlug = $(e.target).data('role-slug');
    if (!roleSlug) {
        roleSlug = $(e.target).parent('a[data-role-slug]').data('role-slug');
    }
    console.log(roleSlug);
});

edited Aug 3, 2019 at 18:34

answered Aug 3, 2019 at 18:18

Morphyish

4,07210 silver badges28 bronze badges

3 Comments

sfarzoso Over a year ago

is there a way to avoid iteration?

Morphyish Over a year ago

Made an edit to suggest another solution not using iterations

charlietfl Over a year ago

Over complicating a simple and very common situation

Collectives™ on Stack Overflow

How to access to data attribute handling different input?

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related