Jquery Append breaks Remove on Modal
Question
I am a complete jquery noob. I am making a modal that both appends some html and removes this html on both clicking out of the modal and on a button click. What is strange is if I put the appended html in the actual page (instead of appending it) the button click works. What is even weirder is that the remove works when you click out of the modal on both the appended and non-appended versions. What the heck am I doing wrong please help!!?!
The 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>
THE APPENDED 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>
THE JQUERY (that I am so mad at)
<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 answers
solution1
0 ACCPTED 2016-10-16 17:55:59
If I get you right the HTML you call "THE APPENDED HTML" initially is not part of the document. If so, your click handler doesn't work because the element you want to attach the handler to is not a part of the document yet. You need to use .on() instead of .click() and attach the handler to the document.
$(document).on("click", ".close", function() { $("#modal").addClass("md-effect"); window.setTimeout(function() { $("#modal").remove(); }, 1000); });
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.