jquery click event on nested elements with same class

Question

I am newbie for jquery. I have nested li with same name. And I want to set left position of div with class open according to clicked li level. But when I click inside li it take position of first.

Here is my code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="open">
  <ul>
    <li class="child">
      <a href="#">link1</a>
      <ul>
        <li class="child">
          <a href="#">menu link1</a>
        </li>
      </ul>
    </li>
  </ul>
</div>
<script>
  $(".child").on("click", function() {
    var l = $(this).parents('ul').length
    var a = 101 * l;
    $(".open").css({
      "left": "-" + a + "%"
    })
  })
</script>

Thanks in advance

Are you wanting to apply this to all child in the tree or just the subchild? — Pete
– Pete, Commented Dec 11, 2018 at 12:25

Thorvarium · Accepted Answer · 2018-12-11 12:32:50Z

2

The problem is that the click is happening in both when you click the inner li, you can use stopPropagation inside the event to prevent that

answered Dec 11, 2018 at 12:32

Thorvarium

1186 bronze badges

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

Comments

MrMaavin · Accepted Answer · 2018-12-11 12:45:05Z

1

You can stopt the propagation with event.stopPropagation();. I added a console.log() so that you see what is clicked.

$(".child").on("click", function(event) {
  event.stopPropagation();
  var l = $(this).parents('ul').length
  var a = 101 * l;
  console.log("click: " + $(this).find(">a").text());
  $(".open").css({
    "left": "-" + a + "%"
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="open">
  <ul>
    <li class="child">
      <a href="#">link1</a>
      <ul>
        <li class="child">
          <a href="#">menu link1</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

answered Dec 11, 2018 at 12:45

MrMaavin

1,7572 gold badges22 silver badges33 bronze badges

Comments

mtizziani · Accepted Answer · 2018-12-11 12:31:52Z

0

you have to disable the bubbling

$(".child").on("click", function(event) {
    event.preventDefault(); // diasble default action
    event.stopPropagination();  // disable bubbling to parent event
    var l = $(this).parents('ul').length
    var a = 101*l;
    $(".open").css({
      "left": "-" + a + "%"
    })
  })

not tested

answered Dec 11, 2018 at 12:31

mtizziani

1,02611 silver badges23 bronze badges

Collectives™ on Stack Overflow

jquery click event on nested elements with same class

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related