JS - Click event not working as it should

Question

Maybe some of you can help me solve this problem. I have this code and I made like an extension for the product that will show product description when click on product. But the on click function isn't working (can't close description). Thanks!

$('.product').on('click', function(){
    $('.product .productExtension').css("display","none");
    $(this).children(".productExtension").css("display","block");
});
function close(){
	$('.productExtension').css("display","none");
}

.product{
  position: relative;
  width: 80px; height: 160px;
  padding: 20px;
  border: solid 1px grey;
  text-align: center; font-family: Arial;
}
.product > .productExtension{
  position: fixed;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 300px; height: 200px;
  padding: 20px;
  background: red;
  text-align: left;
  display: none;
}
.product > .productExtension > .closeProductExtension{
  position: absolute;
  top: -40px; left: 0;
  width: 20px; height: 20px;
  margin: 10px;
  border: none;
  background: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
  <div class="productName">Red Hoodie</div>
  <div class="productPrice">14.72$</div>
  <div class="productExtension">
    <div class="productDescription">This hoodie is in red color</div>
    <div class="closeProductExtension" onclick="close()">Close</div>
  </div>
</div>

Answer 1

Now I know it wasn't fully part of the question, and I took a bit of liberty with the styling, but there is absolutely no need to hide all different productExtension classes upon each close. It would be far lighter to read the properties detailed inside your product div, and render them to a modal.

It does have an overly complex way of closing the modal ( just some liberties at work there, I am sorry for that one :) )

The answer that is currently accepted both details the reason why you cannot use close (could be window.close), I just thought the offer a different perspective when you have more than one product how to transfer the data between a modal and your DOM as you describe it now. I think it has its advantages

window.addEventListener( 'load', function() {
  document.querySelectorAll('.product').forEach( product => {
    product.addEventListener('click', handleProductClicked, false );
  } );
  
  document.querySelectorAll('[data-action]').forEach( action => {
    action.addEventListener('click', handleAction );
  } );
  
  function handleAction( e ) {
    const owner = e.currentTarget;
    const action = owner.getAttribute('data-action');
    const selector = owner.getAttribute('data-target');
    const target = document.querySelector( selector );
    if (action === 'hide') {
      if ( !target.classList.contains('hidden') ) {
        target.classList.add('hidden');
      }
    }
  }
  
  function showModal( title, content, owner ) {
    const modal = document.querySelector('#modal');
    if ( modal.classList.contains('hidden') ) {
      modal.classList.remove( 'hidden' );
    }
    modal.querySelector('[data-for=title]').innerText = title;
    modal.querySelector('[data-for=content]').innerHTML = content;
  }
  
  function handleProductClicked( e ) {
    const productContainer = e.currentTarget;
    const name = productContainer.querySelector('.productName').innerText;
    const description = productContainer.querySelector('.productExtension').innerHTML;
    showModal( name, description, productContainer );
  }
} );

.hidden {
  display: none;
  visibility: hidden;
}
.productExtension {
  display: none;
  visibility: hidden;
}
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 200px;
  border: solid #a0a0a0 1px;
  box-shadow: 5px 3px 5px #777;
  background-color: #cfcfcf;
}
.modal > .title {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  height: 20px;
  font-size: 0.9em;
  background-color: blue;
  border-bottom: solid #fff 1px;
}
.modal > .title > .controls {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 20px;
  height: 18px;
  background-color: #efefef;
  border: solid #a0a0a0 1px;
  text-align: center;
  text-transform: small-caps;
}
.controls:hover {
  font-weight: bold;
  cursor: pointer;
}
.modal > .title > [data-for] {
  padding: 3px;
  color: #fff;
  font-weight: 800;
}
.modal > .content {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 21px;
  bottom: 0px;
  padding: 5px;
  border: inset #666 1px;
}
.product {
  position: relative;
  width: 80px;
  height: 160px;
  padding: 20px;
  border: solid 1px grey;
  text-align: center;
  font-family: Arial;
}

<div class="modal hidden" id="modal">
  <div class="title">
    <span data-for="title"></span>
    <div class="controls">
      <span data-action="hide" data-target="#modal">X</span>
    </div>
  </div>
  <div class="content" data-for="content">
  </div>
</div>
<div class="product">
  <div class="productName">Red Hoodie</div>
  <div class="productPrice">14.72$</div>
  <div class="productExtension">
    <div class="productDescription">This hoodie is in red color</div>
  </div>
</div>
<div class="product">
  <div class="productName">Blue Hoodie</div>
  <div class="productPrice">14.75$</div>
  <div class="productExtension">
    <div class="productDescription">This hoodie is in blue color</div>
  </div>
</div>

Answer 2

You have several problems. The first is that you trigger the open event as well. To solve this you can use stop propagation. The second is that you are using the method name "close" which is already used in JS.

$('.product').on('click', function() {
  $('.product .productExtension').css("display", "none");
  $(this).children(".productExtension").css("display", "block");
});

function closeE(event) {
  event.stopPropagation();
  $('.productExtension').css("display", "none");
}

.product {
  position: relative;
  width: 80px;
  height: 160px;
  padding: 20px;
  border: solid 1px grey;
  text-align: center;
  font-family: Arial;
}

.product>.productExtension {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 200px;
  padding: 20px;
  background: red;
  text-align: left;
  display: none;
}

.product>.productExtension>.closeProductExtension {
  position: absolute;
  top: -40px;
  left: 0;
  width: 20px;
  height: 20px;
  margin: 10px;
  border: 1px solid black;
  background: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
  <div class="productName">Red Hoodie</div>
  <div class="productPrice">14.72$</div>
  <div class="productExtension">
    <div class="productDescription">This hoodie is in red color</div>
    <div class="closeProductExtension" onclick="closeE(event)">Close</div>
  </div>
</div>

Answer 3

As mentioned in other comments, you have two click handler in the parent and child. The parent div is intercepting all click events. Try this for your requirement.

$(".product").on("click", function(e) {
  $(".product .productExtension").css("display", "none");
  $(this)
    .children(".productExtension")
    .css("display", "block");
  if (e.target.classList.contains('closeProductExtension')) {
    $(".productExtension").css("display", "none");
    }
});

Answer 4

This is happening because both functions trigger. The first trigger because you are clicking on an item that is inside the DIV “product” and the second because you’ve passed the function to the onClick. You should take out the “productExtension” div from “product” to make it works.