동적으로 생성 된 div에 div를 추가하십시오.

Question

다음 코드를 가지고 있고 다른 div (모달 윈도우)를 추가하고 싶습니다. 그러나이 기능이 작동하지 않는 것 같습니다. 주식 모달 div는 이미 DOM에 있지만, #overlay div가있는 경우에만 표시되기 때문에 현재 숨겨져 있습니다.

$('.stock-check').on('click', function() { 

    var docHeight = $(document).height(); 

    $('body').append('<div id="overlay" />'); 
    $('#overlay').height(docHeight).css({ 
     'opacity': 0.7, 
     'position': 'absolute', 
     'top': 0, 
     'left': 0, 
     'background-color': 'black', 
     'width': '100%', 
     'z-index': 10000 
    }); 

    $('<div class="stock-modal" />').appendTo('#overlay').show(); 

}); 

이 항목을 실행하면 빈 주식 모달 div가 오버레이 div 안에 삽입되지만 DOM에있는 div는 삽입되지 않습니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

Answer 1

먼저 기존 .stock-modal 사업부와 appendTo #overlay

오버레이가 이미 존재 DIV 여부

$('.stock-modal').appendTo('#overlay').show(); 

Answer 2

새 div를 만들지 마십시오. 먼저 기존 항목을 선택하여 추가하십시오.

$(".stock-modal").appendTo('#overlay').show(); 

Answer 3

확인을 선택으로 변경해야합니다 후 바로 모달 달리 오버레이를 만들고 모달를 추가 추가합니다.

$('.stock-check').on('click', function() { 

var docHeight = $(document).height(); 

if($('#overlay').length > 0) 
{ 
    $('<div class="stock-modal" />').appendTo('#overlay').show(); 
} 
else 
{ 
$('body').append('<div id="overlay" />'); 
$('#overlay').height(docHeight).css({ 
    'opacity': 0.7, 
    'position': 'absolute', 
    'top': 0, 
    'left': 0, 
    'background-color': 'black', 
    'width': '100%', 
    'z-index': 10000 
}); 

$('<div class="stock-modal" />').appendTo('#overlay').show(); 
} 

});