javascript - Jquery multiple selectors within one function using data-attributes -

javascript - Jquery multiple selectors within one function using data-attributes -

i have jquery on() handler click event. in function info attribute in selector's a tag, so:

$(document.body).on('click', '.video-thumbnail a' ,function(){ var videoid = $(this).attr('data-video-id'); //more info atts etc. });

my html so: (times ~ *20)

<div class="block"> <div class="video-thumbnail"> <a data-video-id="123"><img></a> </div> <div class="video-title"> <a>title</a> </div> <div class="video-watch"> <a>watch</a> </div> </div>

what want accomplish every anchor in div ".block" have same click event handler, can still utilize data-attr first anchor (either using this or else).

so: no matter anchor user clicks on within div; execute same jquery function using same data-attr.

what best way this?

thanks guys.

so, if i'm understanding correctly, want attach event handlers anchors, attribute .video-thumbnail <div>. you'd best off using .closest():

$(document.body).on('click', '.block div a' ,function(){ var videoid = $(this).closest('.block').find('.video-thumbnail a').attr('data-video-id'); })

please note other errors in code:

you need closing parenthesis @ end of jquery you need close class attribute on .video-thumbnail element.

as mentioned 76484 semantically create much more sense have each block hold data-video-id attribute, since upper-most context each video.

javascript jquery custom-data-attribute