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.