Jquery Append Break删除Modal

我是一个完整的jquery noob。我正在制作一个模式，既附加一些HTML，并删除这个HTML点击模式和点击按钮。奇怪的是，如果我把附加的html放在实际的页面中（而不是追加它），按钮点击的作品。甚至更奇怪的是，当你在附加版本和非附加版本上点击模式时，删除工作。我做错了什么，请帮忙!!？！Jquery Append Break删除Modal

的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>

来源

2016-10-15 Lisa Frank

如果我让你正确的HTML调用“附件HTML“最初不是文档的一部分。如果是这样，您的点击处理程序不起作用，因为您要附加处理程序的元素不是文档的一部分。您需要使用.on（）而不是.click（）并将处理程序附加到文档。

$(document).on("click", ".close", function() { 
 
    $("#modal").addClass("md-effect"); 
 
    window.setTimeout(function() { 
 
     $("#modal").remove(); 
 
    }, 1000); 
 
});

来源

2016-10-16 17:55:59 Flyer53

OMG，谢谢。这让我发疯，现在它变得非常有意义。 –

Jquery Append Break删除Modal

回答

相关问题