jQuery的附加中斷刪除模態
[英]Jquery Append breaks Remove on Modal
問題描述
我是一個完整的jquery noob。 我正在制作一個模態，該模態既可以附加一些html，也可以在模態之外單擊和單擊按鈕時都刪除此html。 奇怪的是，如果我將附加的html放在實際頁面中（而不是附加），則單擊按鈕即可。 甚至更奇怪的是，當您在附加和非附加版本上的模態之外單擊時，刪除都起作用。 我到底在做什么錯，請幫忙！！！
HTML
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<body>
<div id="result"></div>
<div id="wrapper">Main content of page!</div>
</body>
附加的HTML
<div class="modal" id="modal">
<div class="modal-content" id="modal-content">
<LINK href="css/modal.css" rel="stylesheet">
<div>
<h1>Title</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempor sagittis mi. In ut elementum tortor. Pellentesque dictum ante vitae magna sodales pretium. Donec id purus sit amet risus iaculis luctus. Aliquam varius vestibulum ante, nec ornare leo interdum ac. Vivamus pretium, orci ut viverra pellentesque, quam erat vehicula massa, sed blandit enim turpis vitae nisl. Ut at leo quis libero tempus ultrices. In hac habitasse platea dictumst. Cras feugiat mi eu tincidunt facilisis
</div>
<button class="close" id="close">XXXXXXX</button>
</div>
</div>
JQUERY（我很生氣）
<script>
$(document).ready(function() {
$("#AA").on("click", function() {
$( "#result" ).load( "modals/modaltest.html #modal" );
});
// Adds the modal in orginal project
$( ".close" ).click(function() {
$("#modal").addClass("md-effect");
setTimeout(function() {
$("#modal").remove();
}, 1000); });
// This is the part that doesn't work with the appended html. On button click it is supposed to add a class for animation of modal and then remove html it
$(document).mouseup(function(e) {
var $modal = $("#modal-content");
// if the target of the click isn't the container... nor a descendant of the container
if ($modal.is(e.target) || $modal.has(e.target).length !== 0) return;
$('#modal').addClass('md-effect');
setTimeout(function() { $modal.remove(); }, 2000);
});
});
</script>
1 個解決方案
解決方案1
0 已采納 2016-10-16 17:55:59
如果我理解正確，那么您最初稱為“附加的HTML”的HTML並不是文檔的一部分。 如果是這樣，則您的單擊處理程序將不起作用，因為您要附加處理程序的元素還不是文檔的一部分。 您需要使用.on（）而不是.click（）並將處理程序附加到文檔。
$(document).on("click", ".close", function() { $("#modal").addClass("md-effect"); window.setTimeout(function() { $("#modal").remove(); }, 1000); });
jquery append 刪除和追加
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.