Why addEventListener not working on an appendChild?-CodePudding

I create a couple of "a" elements at the load of the webpage like this, with a default class called "link-block-2", and with a custom id. Then, I add an image inside this "a" element with an image:

function creatediv(div_projectname) {
  var div1 = document.createElement('a');
  div1.className = "link-block-2";
  div1.setAttribute("id", `${div_projectname}_btn`);
  document.getElementById('div-container-other-projects').appendChild(div1); 
  //add div for image
  var divimage = document.createElement('div');
  divimage.className = "div-block-7";
  document.getElementById(`${div_projectname}_btn`).appendChild(divimage)
}

And this is the finall result:

    <div  id="div-container-other-projects">
      <a  id="p1_btn"><div  id="p1_btn"></div></a>
      <a  id="p2_btn"><div  id="p2_btn"></div></a>
      <a  id="p3_btn"><div  id="p3_btn"></div></a>
      <a  id="p4_btn"><div  id="p4_btn"></div></a>
    </div>

I have a function where I detect which "a" element I click:

const buttonscontainer = document.getElementById('div-container-other-projects')
buttonscontainer.addEventListener('click', event => {
  const target = event.target
  if (target.className !== 'link-block-2') return
  Array.from(buttonscontainer.children).forEach(child =>
    child.classList.remove('link-block-2--selected'))
  target.classList.add('link-block-2--selected')
})

This doesn't work because of, when I click on the div appended that has an image (id="p1_btn","p2_btn"..) does not recognize that I am clickin because of the z-index value. I think that by default the div with an image that I append after the "a" element has a zindex value superior than the "a", but no matter what I put on the css class (zindex=100, position aboslute, relative..) that the last div that I append has a zindex bigger thant the previous "a" and the click event listener doesnt work...

I've tried a lot of other solutions and doesn't really work as I want, anyone can help?

Thanks!:)

CodePudding user response：

One option you could try is to bind the click event listener to the div-block-7 element instead of the link-block-2 element. This way, when you click on the div-block-7 element, the event will be triggered and you can then modify the link-block-2 element using target.parentElement.

Here's an example of how you can do this:

const buttonscontainer = document.getElementById('div-container-other-projects')
buttonscontainer.addEventListener('click', event => {
  const target = event.target
  if (target.className !== 'div-block-7') return

  Array.from(buttonscontainer.children).forEach(child => {
    const linkBlock = child.firstElementChild
    if (linkBlock.classList.contains('link-block-2--selected')) {
      linkBlock.classList.remove('link-block-2--selected')
    }
  })

  target.parentElement.classList.add('link-block-2--selected')
})

Alternatively, you could try using the pointer-events property in your CSS to allow the link-block-2 element to receive the click event even when it is covered by the div-block-7 element. You can set the pointer-events property to auto for the link-block-2 element, like this:

.link-block-2 {
  pointer-events: auto;
}

This should allow the link-block-2 element to receive the click event even when it is covered by the div-block-7 element.