$(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/

Answer 1

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;
}