Jqueryブレークを追加モーダルで削除

私は完全なjqueryのnoobです。私はいくつかのhtmlを追加し、このhtmlをモーダルからクリックしてもボタンをクリックしても削除するモーダルを作成しています。奇妙なのは、実際のページに（追加する代わりに）追加されたhtmlを置くとボタンのクリックが機能するということです。追加されたバージョンと追加されていないバージョンの両方でモーダルをクリックすると、削除が機能するということもあります。私は間違って何をしている助けてください！Jqueryブレークを追加モーダルで削除

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」は最初は文書の一部ではありません。その場合は、ハンドラをアタッチする要素がドキュメントの一部ではないため、クリックハンドラは機能しません。 .click（）の代わりに.on（）を使用し、ハンドラをドキュメントに添付する必要があります。

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

出典

2016-10-16 17:55:59 Flyer53

OMG、ありがとうございます。それはとても意味をなさないようになりました。 –

Jqueryブレークを追加モーダルで削除

答えて

関連する問題