Geek Answers Handbook

$ (event.target) .closest (). The length of a hide div does not always work. Any alternatives?

I use $(event.target).closest("#divID").lengthto hide divwhen the user clicks on it, but in the case when it is displayed div, and I click on the date (datepicker), it will not hide div,

Also, if I click on <select>, sometimes it hides it, sometimes it is not.

Is there a better solution to hide the div when something else is clicked?

Is my implementation wrong?

ps: #log_inis the login button, #log_in_formis the formone I want to hide on an external click, and #log_in_containeris the div containing #log_inand#log_in_form

UPDATE: I just noticed that extinction is not the same in windows 10 and linux ubuntu 16.04. On a computer with windows 10 using google chrome, the form disappears the first time I click on the selected one (that is, the desired functionality), but still does not disappear if I select a date. Although on linux ubuntu 16.04 on google chrome it is, as I described above (it does not disappear by date selection, nor does it disappear the first time you click on it)

An example based on Andrey's answer with a fragment

$(document).on('click', function(e){
    if($(e.target).closest('#log_in').is('#log_in'))
    {
      $('#log_in_form').fadeIn();
    }
    else if(!$(e.target).closest('#log_in_container').is('#log_in_container'))
    {
      $('#log_in_form').fadeOut();
    }
})
#log_in_container{
  display:inline-block;
  width:122px;
  height:58px;
  margin-left:60px;
  background-color:gray;
}

#log_in{
  display:block;
  width:120px;
  height:28px;
  text-align: center;
  border: 1px solid red;
  font-size:16px;
  background-color:yellow;
  vertical-align: top;
}

#log_in_form{
  display:none;
  position:absolute;
  width:120px;
  height:28px;
  text-align: center;
  background-color: green;
  border: 1px solid blue;
}

.type{
  display:inline-block;
  width:120px;
  height:30px;
  text-align: center;
  border: 1px solid red;
  font-size:16px;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <!-- ~~~~~~~~~~~~~~~Date picker ~~~~~~~~~~~~~~~ -->
	<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	<script>
  	  $( function()
	  {
    	  $( "#datepicker" ).datepicker();
  	  });
  	</script>
    <title></title>
  </head>
  <body>
  <select class="type">
      <option value="null" disabled="disabled" selected="selected"><p style="color:gray;">Select hero</p></option>
      <option value="0">Spiderman</option>
      <option value="1">Iron man</option>
      <option value="2">Deadpool</option>
  </select>
  <select class="type">
      <option value="null" disabled="disabled" selected="selected"><p style="color:gray;">Select food</p></option>
      <option value="0">Kebab</option>
      <option value="1">Mousaka</option>
      <option value="2">Noodles</option>
  </select>
  <div id="log_in_container">
      <div  id="log_in">Log_In_button</div>
      <div id ="log_in_form">login_form</div>
  </div>
  <div id="datepicker"></div>


  </body>
</html>
Run codeHide result

, Log_in_button, Log_in_form. , , ​​   Log_in_form - , , Log_in_form . , (, select pop up). ?

+6
6

jQuery ( DOM, , document). , ui-datepicker, , event.stopPropagation() document .

Javascript, DOM.

W3C . this - .

, , , document.addEventListener $(document).on:

document.addEventListener("click", function(e){
    if($(e.target).closest('#log_in').is('#log_in'))
    {
      $('#log_in_form').fadeIn();
    }
    else if(!$(e.target).closest('#log_in_container').is('#log_in_container'))
    {
      $('#log_in_form').fadeOut();
    }
}, true);
#log_in_container{
  display:inline-block;
  width:122px;
  height:58px;
  margin-left:60px;
  background-color:gray;
}

#log_in{
  display:block;
  width:120px;
  height:28px;
  text-align: center;
  border: 1px solid red;
  font-size:16px;
  background-color:yellow;
  vertical-align: top;
}

#log_in_form{
  display:none;
  position:absolute;
  width:120px;
  height:28px;
  text-align: center;
  background-color: green;
  border: 1px solid blue;
}

.type{
  display:inline-block;
  width:120px;
  height:30px;
  text-align: center;
  border: 1px solid red;
  font-size:16px;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <!-- ~~~~~~~~~~~~~~~Date picker ~~~~~~~~~~~~~~~ -->
	<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	<script>
  	  $( function()
	  {
    	  $( "#datepicker" ).datepicker();
  	  });
  	</script>
    <title></title>
  </head>
  <body>
  <select class="type">
      <option value="null" disabled="disabled" selected="selected"><p style="color:gray;">Select hero</p></option>
      <option value="0">Spiderman</option>
      <option value="1">Iron man</option>
      <option value="2">Deadpool</option>
  </select>
  <select class="type">
      <option value="null" disabled="disabled" selected="selected"><p style="color:gray;">Select food</p></option>
      <option value="0">Kebab</option>
      <option value="1">Mousaka</option>
      <option value="2">Noodles</option>
  </select>
  <div id="log_in_container">
      <div  id="log_in">Log_In_button</div>
      <div id ="log_in_form">login_form</div>
  </div>
  <div id="datepicker"></div>


  </body>
</html>
Hide result

, <select> Chrome Windows, Chrome Linux. , . <select>, , - . , :

Chrome 19 Linux: [ ], -, , .

, , , - - , . , .

+4

mouseup click, .

$(document).on('mouseup', function(e){
    if($(e.target).closest('#log_in').is('#log_in'))
    {
      $('#log_in_form').fadeIn();
    }
    else if(!$(e.target).closest('#log_in_container').is('#log_in_container'))
    {
      $('#log_in_form').fadeOut();
    }
})
#log_in_container{
  display:inline-block;
  width:122px;
  height:58px;
  margin-left:60px;
  background-color:gray;
}

#log_in{
  display:block;
  width:120px;
  height:28px;
  text-align: center;
  border: 1px solid red;
  font-size:16px;
  background-color:yellow;
  vertical-align: top;
}

#log_in_form{
  display:none;
  position:absolute;
  width:120px;
  height:28px;
  text-align: center;
  background-color: green;
  border: 1px solid blue;
}

.type{
  display:inline-block;
  width:120px;
  height:30px;
  text-align: center;
  border: 1px solid red;
  font-size:16px;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <!-- ~~~~~~~~~~~~~~~Date picker ~~~~~~~~~~~~~~~ -->
	<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	<script>
  	  $( function()
	  {
    	  $( "#datepicker" ).datepicker();
  	  });
  	</script>
    <title></title>
  </head>
  <body>
  <select class="type">
      <option value="null" disabled="disabled" selected="selected"><p style="color:gray;">Select hero</p></option>
      <option value="0">Spiderman</option>
      <option value="1">Iron man</option>
      <option value="2">Deadpool</option>
  </select>
  <select class="type">
      <option value="null" disabled="disabled" selected="selected"><p style="color:gray;">Select food</p></option>
      <option value="0">Kebab</option>
      <option value="1">Mousaka</option>
      <option value="2">Noodles</option>
  </select>
  <div id="log_in_container">
      <div  id="log_in">Log_In_button</div>
      <div id ="log_in_form">login_form</div>
  </div>
  <div id="datepicker"></div>


  </body>
</html>
Hide result
+1

, dateoicker <td>.

onSelect jQuery ui datepicker.

$(document).on('click', function(e){
    if($(e.target).closest('#log_in').is('#log_in'))
    {
      $('#log_in_form').fadeIn();
    }
    else if(!$(e.target).closest('#log_in_container').is('#log_in_container'))
    {
      $('#log_in_form').fadeOut();
    }
})
#log_in_container{
  display:inline-block;
  width:122px;
  height:58px;
  margin-left:60px;
  background-color:gray;
}

#log_in{
  display:block;
  width:120px;
  height:28px;
  text-align: center;
  border: 1px solid red;
  font-size:16px;
  background-color:yellow;
  vertical-align: top;
}

#log_in_form{
  display:none;
  position:absolute;
  width:120px;
  height:28px;
  text-align: center;
  background-color: green;
  border: 1px solid blue;
}

.type{
  display:inline-block;
  width:120px;
  height:30px;
  text-align: center;
  border: 1px solid red;
  font-size:16px;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <!-- ~~~~~~~~~~~~~~~Date picker ~~~~~~~~~~~~~~~ -->
	<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	<script>
  	  $( function()
	  {
    	  $( "#datepicker" ).datepicker({
			onSelect: function(i, e){
				$('#log_in_form').fadeOut();
			}
	  });
  	  });
  	</script>
    <title></title>
  </head>
  <body>
  <select class="type">
      <option value="null" disabled="disabled" selected="selected"><p style="color:gray;">Select hero</p></option>
      <option value="0">Spiderman</option>
      <option value="1">Iron man</option>
      <option value="2">Deadpool</option>
  </select>
  <select class="type">
      <option value="null" disabled="disabled" selected="selected"><p style="color:gray;">Select food</p></option>
      <option value="0">Kebab</option>
      <option value="1">Mousaka</option>
      <option value="2">Noodles</option>
  </select>
  <div id="log_in_container">
      <div  id="log_in">Log_In_button</div>
      <div id ="log_in_form">login_form</div>
  </div>
  <div id="datepicker"></div>


  </body>
</html>
Hide result
+1

.length, , . is():

  if ($(e.target).closest(selector).is(selector)) {
     // you clicked inside $(selector)
  }

, selector CSS.

:

$(document).on('click', function(e){
  console.log('You clicked ' + (
    $(e.target).closest('click-test').is('click-test') ? 
    'inside' : 'outside'
    ) + '.'
  )
})
click-test {
  margin: 2rem; padding: 1rem; border: 1px solid; display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<click-test><p>Child</click-test>
Hide result

#log_in_container , . , .login-toggle, :

$(document).on('click', function(e){
  if (!( $(e.target).closest('.login-toggle').is('.login-toggle') 
      || $(e.target).closest('#log_in_container').is('#log_in_container')
     ) ) {
         $('#log_in_container').fadeOut(1000);
  }
})
0

mousedown click, , ,

$(e.target).parents().has($('#log_in_container')).length


$(document).on('mousedown', function(e){
    if($(e.target).closest('#log_in').is('#log_in'))
    {
      $('#log_in_form').fadeIn();
    }
    else if($(e.target).parents().has($('#log_in_container')).length)
    {
      $('#log_in_form').fadeOut();
    }
})
0

onSelect datepicker , bound, document , , datepicker onSelect, , .on('click'), , 2 .

datepicker,

$("#datepicker").datepicker({
        onSelect: function(date, obj) {
          $(document).trigger('click')
        }
      });


$(document).on('click', function(e) {
  if ($(e.target).closest('#log_in').is('#log_in')) {
    $('#log_in_form').fadeIn();
  } else if (!$(e.target).closest('#log_in_container').is('#log_in_container')) {
    $('#log_in_form').fadeOut();
  }
})
#log_in_container {
  display: inline-block;
  width: 122px;
  height: 58px;
  margin-left: 60px;
  background-color: gray;
}

#log_in {
  display: block;
  width: 120px;
  height: 28px;
  text-align: center;
  border: 1px solid red;
  font-size: 16px;
  background-color: yellow;
  vertical-align: top;
}

#log_in_form {
  display: none;
  position: absolute;
  width: 120px;
  height: 28px;
  text-align: center;
  background-color: green;
  border: 1px solid blue;
}

.type {
  display: inline-block;
  width: 120px;
  height: 30px;
  text-align: center;
  border: 1px solid red;
  font-size: 16px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <!-- ~~~~~~~~~~~~~~~Date picker ~~~~~~~~~~~~~~~ -->
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
    $(function() {
      $("#datepicker").datepicker({
        onSelect: function(date, obj) {
          $(document).trigger('click')
        }
      });
    });
  </script>
  <title></title>
</head>

<body>
  <select class="type">
      <option value="null" disabled="disabled" selected="selected"><p style="color:gray;">Select hero</p></option>
      <option value="0">Spiderman</option>
      <option value="1">Iron man</option>
      <option value="2">Deadpool</option>
  </select>
  <select class="type">
      <option value="null" disabled="disabled" selected="selected"><p style="color:gray;">Select food</p></option>
      <option value="0">Kebab</option>
      <option value="1">Mousaka</option>
      <option value="2">Noodles</option>
  </select>
  <div id="log_in_container">
    <div id="log_in">Log_In_button</div>
    <div id="log_in_form">login_form</div>
  </div>
  <div id="datepicker"></div>


</body>

</html>
Hide result
0

More articles:


All Articles