user3714598 user3714598 - 1 year ago 57
HTML Question

Binding an event to an element that has so many element inside it

I have this kind of html

<script src=""></script>
<li class="page_leftArrow ${indexOfCurrentPage == 0 ? "disabled" : ""}">
<a href="#" aria-label="Previous" class="arrowPage left">
<span aria-hidden="true"><i class="icon-arrows-left" max="${max}"></i></span>

Now I need to bind an event if this "li" is clicked. But if you will notice, inside the li, there is link and inside a link there is an icon. If I happen to press on the area of icon, i get a different element which is not good in the system that I'm doing. Example, I need to get the class in the li, If I clicked on the area of link, I will I get "arrowPage left" instead of ""page_leftArrow

My question is what can I do so that when I click on the inside of "li", I will get the correct element.

Answer Source

hope to understand the question right. Lets separate your questions. First you need to bind click event on the li. So the code will go like this

$('.page_leftArrow').on('click', function() {
  //here is your code.

you have to know that like $(this) selector, in the event, you can take current clicked <li> tag and from there you can make your logic. Also if you make the link like this <a href="javascript:void(0)" aria-label="Previous" class="arrowPage left">. this kind of href will prevent the link from executing.