$(event.target) not detecting any inner element

Question

I have an element that when clicked, shows an inner text (which is initially set to display: none). I want to add a span inside that inner text to close that text, but $(event.target) is not working in this case and I'm not sure why. It's also worth noting that the links inside that text do not work either.

HTML

<div class="blog-block-2">
    <div class="blog-entry-language-2">
    <h2> Test Header</h2>
    </div>

    <div class="blog-entry-main-2">

        <div class="blog-entry-image-2"></div>
        <div class="blog-entry-text-wrap-2">
            <h2>Test header <span class="close">X</span></h2>
            <p> 
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
            </p>
            <p>
                Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. <a href="#">Aenean dignissim</a> pellentesque felis.
            </p>
      <div class="overlay"></div>
        </div>
    </div>

    <div class="blog-entry-extra-2">
        <h1> Extra tag </h1>
    </div>
</div>

JS

$(".blog-block-2").on("click",function(event){
    var target = $( event.target );
    if( target.is("span")){
        console.log("clicked outside");
        hideText();
    } else {
        showText();
        console.log("clicked");
    }
})

JsFiddle:

https://jsfiddle.net/ukbx8m1b/

i suspect this is going to be some weird css issue. If you inspect element on any part of that div, it gives you the blog-block-2 div rather than what you right clicked on. This doesn't appear to be an event delegation issue. More likely to be related to z-index. — Kevin B, Oct 19 '17 at 19:12
It doesn't really matter, I just want the event-target to recognize anything inside of the "blog-block-2" really. — Sergi, Oct 19 '17 at 19:20
@Sergi in Kevin B's fiddle, he has already fixed the issue for you — Huangism, Oct 19 '17 at 19:24

score -1 · Answer 1 · answered Oct 19 '17 at 19:19

If you want to use the "X" that you created in the text header, you have to make it stand out. Currently everything is flat so when you click in that area you get the parent "blog-block-2". If you add position and z-index to the parent element and to the close class, it will work as you want it:

https://jsfiddle.net/ukbx8m1b/1/

.blog-block-2{
    display: flex;
  flex-direction: column;
  margin-bottom: 150px;
  position: relative;
  z-index: 1;
}
.close{
  position: relative;
  z-index: 1000;
}

$(event.target) not detecting any inner element

1 Answers1