javascript - 创建时隐藏框

Question

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

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

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

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

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

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>