Grab only the element selected, not parent elements

Question

I am working on a web app that grabs the class of the element that you click on. The issue is that this code below also grabs the class of that element's parents too. I only need the class of the selected element.

$("*").click(function () {
     var myClass = $(this).attr("class");
        alert(myClass);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="business">
  <div class="businesses"><h2 class="name">Name</h2><p>2484596322</p></div>
  <div class="businesses"><h2 class="name">Name</h2><p>2484596322</p></div>
  <div class="businesses"><h2 class="name">Name</h2><p>2484596322</p></div>
  <div class="businesses"><h2 class="name">Name</h2><p>2484596322</p></div>
  <div class="businesses"><h2 class="name">Name</h2><p>2484596322</p></div>
  <div class="businesses"><h2 class="name">Name</h2><p>2484596322</p></div>
</div>

Call `stopPropagation()` on the event to prevent it bubbling up the DOM and being caught multiple times: https://jsfiddle.net/oLx9pyzt/3/ — Rory McCrossan, Oct 22 '18 at 15:30

score 2 · Accepted Answer · answered Oct 22 '18 at 15:30

Working fiddle.

You need to use e.stopPropagation() to stop the event from bubbling :

$("*").click(function(e) {
  e.stopPropagation();

  var myClass = $(this).attr("class");
  alert(myClass);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="business">
  <div class="businesses">
    <h2 class="name">Name</h2>
    <p>2484596322</p>
  </div>
  <div class="businesses">
    <h2 class="name">Name</h2>
    <p>2484596322</p>
  </div>
  <div class="businesses">
    <h2 class="name">Name</h2>
    <p>2484596322</p>
  </div>
  <div class="businesses">
    <h2 class="name">Name</h2>
    <p>2484596322</p>
  </div>
  <div class="businesses">
    <h2 class="name">Name</h2>
    <p>2484596322</p>
  </div>
  <div class="businesses">
    <h2 class="name">Name</h2>
    <p>2484596322</p>
  </div>
</div>

I decided to go a different route with how i did this, but this did work. Thank you for taking the time to post this. — Joshua Blevins, Oct 22 '18 at 16:32

Grab only the element selected, not parent elements

1 Answers1