CODEWITHSUNDEEP
javascriptjqueryevent-handling
jeff
jeff

Reputation: 1020

event.target jquery confuses me

Following is my code 

$(document).ready(function() {
	
  var open 			= $('.openButton'),
  		container = $('.container'),
      close			= $('.closeButton');
  
  	container.hide();
    
  	function init() {
    	eventInit();
    }
    
    function eventInit() {
    	$(document).on('click', openBox);
			$(document).on('keyup', function(e) {
      	container.hide();
      });
    }
    
    function openBox(event) {
    	if(event.target === open[0] || $(event.target).closest(container).length) {
      	container.show();
      } else if(event.target === close[0]) {
      	container.hide();
      } else {
      	container.hide();
      }
    }
    
    init();
});
.container {
  width:400px;
  height:400px;
  background-color:red;
  position:relative;
  //display:none;
}

.closeButton {
  position:absolute;
  top:0;
  right:0;
  height:50px;
  width:50px;
  background-color:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">
  <form action="post">
    <input type="text" class="openButton">
  </form>
</div>

<div class="container">
  <div class="closeButton"></div>
</div>

Here, what does not work, is when I click on the close div, the container does not close. I am very confused why it does not work. Could someone help me with this along with some insights on why it did not work with my code.

Thanks

Jeff

Upvotes: 2

Views: 45

Answers (2)

l.varga
l.varga

Reputation: 871

The problem is in "|| $(event.target).closest(container).length" - that will be true for clicking on the close button. So instead of going to else if and else parts, it'll be true even for click button and it'll try to show the container. See updated snippet.

$(document).ready(function() {
	
  var open 			= $('.openButton'),
  		container = $('.container'),
      close			= $('.closeButton');
  
  	container.hide();
    
  	function init() {
    	eventInit();
    }
    
    function eventInit() {
    	$(document).on('click', openBox);
			$(document).on('keyup', function(e) {
      	container.hide();
      });
    }
    
    function openBox(event) {
    	if(event.target === open[0]) {
      	container.show();
      } else if(event.target === close[0]) {
      	container.hide();
      }
    }
    
    init();
});
.container {
  width:400px;
  height:400px;
  background-color:red;
  position:relative;
  //display:none;
}

.closeButton {
  position:absolute;
  top:0;
  right:0;
  height:50px;
  width:50px;
  background-color:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">
  <form action="post">
    <input type="text" class="openButton">
  </form>
</div>

<div class="container">
  <div class="closeButton"></div>
</div>

Upvotes: 1

Pranav C Balan
Pranav C Balan

Reputation: 115222

The close button is inside the container div so $(event.target).closest(container).length would be truthy and second else if doesn't meet. So give higher priority to the close div by updating the order of if statements.

$(document).ready(function() {

  var open = $('.openButton'),
    container = $('.container'),
    close = $('.closeButton');

  container.hide();

  function init() {
    eventInit();
  }

  function eventInit() {
    $(document).on('click', openBox);
    $(document).on('keyup', function(e) {
      container.hide();
    });
  }

  function openBox(event) {
    if (event.target === close[0]) {
      container.hide();
    } else if (event.target === open[0] || $(event.target).closest(container).length) {
      container.show();
    } else {
      container.hide();
    }
  }

  init();
});
.container {
  width: 400px;
  height: 400px;
  background-color: red;
  position: relative;
  //display:none;
}

.closeButton {
  position: absolute;
  top: 0;
  right: 0;
  height: 50px;
  width: 50px;
  background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">
  <form action="post">
    <input type="text" class="openButton">
  </form>
</div>

<div class="container">
  <div class="closeButton"></div>
</div>

Upvotes: 1

Related Questions