What could be causing my jQuery click event to behave as if I triggered a click on the parent element?

Question

What could be causing my jQuery click event to behave as if I triggered a click on the parent element?

I have created multiple child divs within a parent div. All the divs are positioned, with the parent div set to absolute and the child divs set to relative. The z-index of the parent div is 400, while the child divs have a z-index of 500.

However, when I click on any child div, jQuery is not detecting the parent div using the click function. I am unsure why these codes are not working as expected.

If anyone could assist me in resolving this issue, it would be greatly appreciated.

ID of the Parent div: "#cardslayer"

Class of the Child divs: ".cardinlayer"

-HTML:

<body>
<div id="cardslayer"></div>
</body>

-CSS:

#cardslayer {
    position: absolute;
    width: 960px;
    height: auto;
    top: 0;
    left: 0;
    z-index: 400;
    display: none;
}

.cardinlayer {
    width: 100px;
    height: 125px;
    margin: 10px;
    position: relative;
    z-index: 500;
    display: none;
}

-JQUERY: (Includes some CSS styling through jQuery)

var hazakstr = "";
var i = 0;

$("#button").click(function(){
    hazakstr = "<center>";
    for(i=0; i<22; i++) {
        if(level_owner[i] == -1) {
            hazakstr += "<div class='cardinlayer' id='house" + i + "' style='background: url(../houses/" + i + ".png); background-size: 100px 125px; background-repeat: no-repeat;'></div>";
        }
    }
    hazakstr += "</center>";
    $("#cardslayer").css("display", "block");
    $("#cardslayer").html(hazakstr);
    $(".cardinlayer").css("display", "inline-block");
    i=((567 - $("#cardslayer").height()) / 2);
    $("#cardslayer").css("height", 567 - i + "px");
    $("#cardslayer").css("padding-top", i + "px");
});

HTML content added to #cardslayer after loop completion:

HTML:

<div id="cardslayer" style="display: block; height: 507px; padding-top: 60px;">
    <center>
        <div class="cardinlayer" id="house0" style="background: url(&quot;../houses/0.png&quot;) 0% 0% / 100px 125px no-repeat; display: inline-block;"></div>
        <div class="cardinlayer" id="house1" style="background: url(&quot;../houses/1.png&quot;) 0% 0% / 100px 125px no-repeat; display: inline-block;"></div>
        .
        .
        .
        .
        <div class="cardinlayer" id="house21" style="background: url(&quot;../houses/21.png&quot;) 0% 0% / 100px 125px no-repeat; display: inline-block;"></div>
    </center>
</div>

Despite creating a click function for .cardinlayer, it is not functioning properly.

$(".cardinlayer").click(function(){
      alert("Cardinlayer");
});

I also attempted a click function for all div elements:

$("div").click(function(){
    alert($(this).attr("id"));
});

However, upon clicking a .cardinlayer element, the return value is #cardslayer instead of the specific house ID like #house1.

#cardslayer is the parent container, and .cardinlayer(s) are its children.

Image illustrating the issue: https://i.sstatic.net/QHyut.jpg

In the image, the red section represents the parent, while the blue sections represent the children. Upon clicking a card, jQuery incorrectly identifies that the faded black background (parent) has been clicked.

I seek assistance from anyone who can help me resolve this problem effectively. Thank you and have a great day!

javascript html jquery css onclick

Answer 1

Answer №1

Modifying the click event is possible with additional functions like stopPropagation or preventDefault. (For more information, visit: Event on MDN)

To visualize this in action:

let hazakstr = "";

const cardHtml = ({ i }) => {
  return `
    <div
      id="house${i}"
      class="cardinlayer"
      data-idx="${i}"
    >
      HOUSE ${i}
    </div>
  `
}


jQuery("#button").on('click', function() {
  for (let i = 0; i < 22; i++) {
    hazakstr += cardHtml({ i })
  }
  $("#cardslayer").html(hazakstr);
});

jQuery("#cardslayer").on('click', '.cardinlayer', function(e) {
  e.stopPropagation() // this stops the event from propagation
  const { idx } = $(this).data()
  alert(`Clicked house card: ${idx}`)
})

.container {
  position: relative;
}

#cardslayer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.cardinlayer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 125px;
  padding: 8px 16px;
  background-color: rgba(255, 0, 0, 0.3);
  -webkit-transition: background-color 0.25s ease-out;
  -moz-transition: background-color 0.25s ease-out;
  -o-transition: background-color 0.25s ease-out;
  transition: background-color 0.25s ease-out;
  cursor: pointer;
}

.cardinlayer:hover {
  background-color: rgba(255, 0, 0, 0.9)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button">CLICK</button>
<div class="container">
  <div id="cardslayer"></div>
</div>

EDIT / SUGGESTION:

If feasible, I recommend avoiding using jQuery. Here's an updated approach using Vue:

Vue.component('HouseCard', {
  props: ['idx'],
  methods: {
    onClick({ idx }) {
      alert(`Clicked house: ${ idx }`)
    },
  },
  template: `
    <div
      class="cardinlayer"
      @click.stop="() => onClick({ idx })"
    >
      HOUSE {{ idx }}
    </div>
  `
})

new Vue({
  el: "#app",
  data() {
    return {
      houses: [],
    }
  },
  methods: {
    addHouse(houses) {
      return [...houses, houses.length]
    },
    add1House() {
      this.houses = this.addHouse(this.houses)
    },
    add22Houses() {
      let ret = this.houses
      for (let i = 0; i < 22; i++) {
        ret = this.addHouse(ret)
      }
      this.houses = ret
    }
  },
  template: `
   ...
  `
})

...

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

Alternatively, you can utilize React:

...

...

...

Answer 2

Modifying the click event is possible with additional functions like stopPropagation or preventDefault. (For more information, visit: Event on MDN)

To visualize this in action:

let hazakstr = "";

const cardHtml = ({ i }) => {
  return `
    <div
      id="house${i}"
      class="cardinlayer"
      data-idx="${i}"
    >
      HOUSE ${i}
    </div>
  `
}


jQuery("#button").on('click', function() {
  for (let i = 0; i < 22; i++) {
    hazakstr += cardHtml({ i })
  }
  $("#cardslayer").html(hazakstr);
});

jQuery("#cardslayer").on('click', '.cardinlayer', function(e) {
  e.stopPropagation() // this stops the event from propagation
  const { idx } = $(this).data()
  alert(`Clicked house card: ${idx}`)
})

.container {
  position: relative;
}

#cardslayer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.cardinlayer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 125px;
  padding: 8px 16px;
  background-color: rgba(255, 0, 0, 0.3);
  -webkit-transition: background-color 0.25s ease-out;
  -moz-transition: background-color 0.25s ease-out;
  -o-transition: background-color 0.25s ease-out;
  transition: background-color 0.25s ease-out;
  cursor: pointer;
}

.cardinlayer:hover {
  background-color: rgba(255, 0, 0, 0.9)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button">CLICK</button>
<div class="container">
  <div id="cardslayer"></div>
</div>

EDIT / SUGGESTION:

If feasible, I recommend avoiding using jQuery. Here's an updated approach using Vue:

Vue.component('HouseCard', {
  props: ['idx'],
  methods: {
    onClick({ idx }) {
      alert(`Clicked house: ${ idx }`)
    },
  },
  template: `
    <div
      class="cardinlayer"
      @click.stop="() => onClick({ idx })"
    >
      HOUSE {{ idx }}
    </div>
  `
})

new Vue({
  el: "#app",
  data() {
    return {
      houses: [],
    }
  },
  methods: {
    addHouse(houses) {
      return [...houses, houses.length]
    },
    add1House() {
      this.houses = this.addHouse(this.houses)
    },
    add22Houses() {
      let ret = this.houses
      for (let i = 0; i < 22; i++) {
        ret = this.addHouse(ret)
      }
      this.houses = ret
    }
  },
  template: `
   ...
  `
})

...

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

Alternatively, you can utilize React:

...

...

...

What could be causing my jQuery click event to behave as if I triggered a click on the parent element?

Answer №1

EDIT / SUGGESTION:

Similar questions

Utilize a Jquery object as a key within a different object

What could be causing the occasional appearance of a tiny glitch, like a pixel dot, below a menu item when utilizing this hover effect?

execute field function prior to sorting

Responsive Gallery Grid Slider with uniform height boxes

The Dropdownlist jQuery is having trouble retrieving the database value

The ForbiddenError has struck again, this time wreaking havoc in the realms of Node.js, Express.js

Is it possible to nest a parsys within another parsys in this context?

Ways to enhance radio imagery selection?

Utilizing Query Data Source in ASP.NET MVC for Enhanced JQuery DataTables Experience

Navigating the root path that is defined in the gulp task within an Angular application

Changing the text color of Material UI Accordion Summary upon expansion

What might be stopping Javascript from saving the value to the clipboard?

Challenges with registering on Ajax platform

Horizontal rule spans the full width of the content, appearing within an ordered list

The environmental variables stored in the .env file are showing up as undefined in Next.js 13

Issue with Table Element's Full Width Within Parent Element

Unable to retrieve data on the frontend using Node.js and React

Can someone assist me in understanding the proper syntax for the Node.js function that inserts a document into Watson's Discovery service from the watson-developer-cloud library?

unable to update database using jquery ajax

The Bootstrap menu seamlessly extends beyond the edge of the screen