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

回答

相關問題