创建时隐藏的框

Question

在我的网站上，我有一个按钮，点击后会创建一个框。如果该框可见且用户在其外部单击，则应隐藏该框。我遇到的问题是该框在创建后立即被隐藏。

如果用户点击它之外，这是我用来删除该框的代码。我很难理解为什么在创建盒子时它会被触发，因为它还没有真正可见。

＆＃13;

＆＃13;

function createBox(){

    var output = "";
    
    output += '<div class="single-box">';
    output += '</div>';
    
    $("#list-box").html(output);
    
    document.getElementById('list-box').style.display = 'block';
}


$(document).click(function(event) { 
    if(!$(event.target).closest('.single-box').length) {
        if($('.single-box').is(":visible")) {

            var output = "";

            $("#list-box").html(output);
         
		      document.getElementById('list-box').style.display = 'none';
          
        }
    }        
});

＆＃13;

#list-box{
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	z-index: 500;
	position: fixed;
	display: none;
}

.single-box{
	z-index: 1000;
	top: 100px;
	position: fixed;
	background-color: white;
	overflow-y: auto;
	overflow-x: hidden;
	width: 500px;
	height: 500px;
	right: calc(50% - 250px);
	box-shadow: 0px 1px 4px -1px rgba(0, 0, 0, 1); 
	text-align: center;
    border-radius: 3px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<p onclick="createBox();">
Create box
</p>
<div id="list-box"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

$("#somebutton").click(function () {
  $("#container").append('<div class="box">Your hidden box is now visible</div>');

});

var mouse_is_inside = false;
$(document).ready(function(){
    $('#container').hover(function(){ 
        mouse_is_inside=true; 
    }, function(){ 
        mouse_is_inside=false; 
    });

    $("body").mouseup(function(){ 
        if(! mouse_is_inside) $('.box').hide();
    });
});

#container {
    width:200px;
  height:200px;
  background:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<button id="somebutton">
Your button
</button>
<div id="container"></div>

Answer 2

工作解决方案：

let mouse_inside = false ;

$("#somebutton").click(function () {
  let div = document.createElement('div');
  div.className = 'box';
  $("#container").append(div);

  $('.box').hover(function(){ 
      mouse_inside=true; 
  }, function(){ 
      mouse_inside=false; 
  });

});

$(document).ready(function(){

    $("body").mouseup(function(){ 
      mouse_inside || $('.box').hide();
    });
});

#container {
    width:200px;
  height:200px;
  background:red;
}

#container .box { background-color: blue; width:40px; height:40px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="somebutton">
ADD A BOX BELOW
</button>
<div id="container"></div>

Answer 3

在这里，您尝试使用此步骤，首先检查element点击id

如果元素是您想要创建的按钮，那么该框会触发您的creatBox()否则如果点击的元素是框，则不执行任何其他操作#list-box并隐藏它：

＆＃13;

＆＃13;

function createBox(){

    var output = "";
    
    output += '<div class="single-box">';
    output += '</div>';
    
    $("#list-box").html(output);
    
    $('#list-box').show();
}


$(document).click(function(e) {

    var target = $(e.target);
    var id = target.attr('id');
    var eclass = target.attr('class');
    if(id == "creatbox"){
      createBox();
      target.prop("disabled",true);
    }
    else if(eclass == "single-box")
    {
     return;
    }
    else {
    $("#list-box").html('');
    $('#list-box').hide();
    $('#creatbox').prop("disabled",false);
    }
    
});

＆＃13;

#list-box{
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	z-index: 500;
	position: fixed;
	display: none;
}

.single-box{
	z-index: 1000;
	top: 100px;
	position: fixed;
	background-color: white;
	overflow-y: auto;
	overflow-x: hidden;
	width: 500px;
	height: 500px;
	right: calc(50% - 250px);
	box-shadow: 0px 1px 4px -1px rgba(0, 0, 0, 1); 
	text-align: center;
    border-radius: 3px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<button id="creatbox">
Create box
</button>
<div id="list-box"></div>

＆＃13;

＆＃13;

＆＃13;