Jquery 대화 상자가 지정된 div 내에로드되지 않았습니다.

일치하는 요소 내에 load()을 사용하여로드 된 Jquery 대화 상자가로드되지 않습니다.Jquery 대화 상자가 지정된 div 내에로드되지 않았습니다.

<html> 
<head> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script> 

    <script> 
    $(document).ready(function() { 

    $('#button1').click(function() { 
     $('#loaded-dialog-wrapper').load('child.html'); 
    }); 
    }); 
    </script> 
</head> 

<body> 
    <button id='button1'>Click</button> 

    <div id='loaded-dialog-wrapper'></div> 
</body> 

</html>

및로드 대화 상자가 포함 된 문서 : 여기 내 부모 문서의

<script> 
$(document).ready(function(){ 
var dialogOpts = { 
    width: 600, 
    height: 400, 
    modal: true, 
    autoOpen: false, 
    draggable: false, 
    buttons: [{text: "Close", click: function() { $(this).dialog("close");} }], 
}; 

$('#loaded-dialog').dialog(dialogOpts); 
$('#loaded-dialog').dialog('open'); 

}); 
</script> 

<div id='loaded-dialog'> 
    <p>Text</p> 
</div>

#loaded-dialog-wrapper

가로드를하지만 #loaded-dialog 포함되어 있지 않습니다; 노드는 script입니다. 대신 #loaded-dialog은 body 노드에 자식으로 추가 된 div 안에 포함됩니다. 대화 상자를 닫으면 대화 상자가 사라지고 버튼을 다시 클릭하면 이전과 같은 방식으로 대화 상자가 표시되고 div이 새로 작성됩니다. #loaded-dialog의 내용을 두 번째로 열면 표시된 대화 상자에 업데이트 된 내용이 들어 있지 않습니다. 그러나 새 콘텐츠가 포함 된 #loaded-dialog은 두 번째로 생성 된 div에 포함되어 있습니다.

출처

2014-10-30 user2233706

JqueryUI moves the dialog div inside another div을 필요로하지 않으며, body 노드의 자식으로 추가합니다 : 그런 다음로드 - 대화 - 래퍼에 직접 클릭을 할당합니다. 이것이 내가 관찰 한 것입니다. 이 문제를 해결하기 위해 대화 상자를 닫을 때 div가 삭제되었습니다. 이것은 child.html의 dialogOpts에서 수행되었습니다.

var dialogOpts = { 
    width: 600, 
    height: 400, 
    modal: true, 
    autoOpen: false, 
    draggable: false, 
    buttons: [{text: "Close", click: function() { $(this).dialog("close");} }], 
    close: function() { 
    $('#loaded-dialog').dialog('destroy'); // To remove the Jquery stuff 
    $('#loaded-dialog').remove(); // To remove the div 
    }, 
};

출처

2014-10-30 20:11:17 user2233706

기본 문서로 대화 상자 옵션을 이동하십시오.

$('#button1').on('click',function() { 
    $('#loaded-dialog-wrapper').dialog(dialogOpts).html('Place your message here'); 
});

당신은 그 두번째 문서 child.html을

출처

2014-10-30 17:02:28

모든 코드를 child.html에 보관하고 싶습니다. parent.html에 child.html의 내용을 알리고 싶지 않습니다. child.html 안에있는 내용은 모두로드해야합니다. 이것이 가능한가? – user2233706

참고로, 1.8 이후로드()는 더 이상 사용되지 않습니다. http://api.jquery.com/load-event/ 주 문서에 로직을 배치해야 렌더링 될 수 있습니다. document.ready() –

에 의해 child.html 작동합니까, 당신이 그것을 호출하면 expishly? –

Jquery 대화 상자가 지정된 div 내에로드되지 않았습니다.

답변

관련 문제