jquery hören klicken Ereignis auf dynamisch erstellten Element

Question

Ich muss ein modales für HTML-Seite erstellen. Wenn eine Schaltfläche auf der Seite angeklickt wird, erscheinen die Modale. Schaltfläche zum Schließen modal enthält im Modal selbst.

Das Problem ist, dass Click-Ereignis auf Schließen-Schaltfläche, die ein modales HTML aus dem Dokument entfernen, nicht funktioniert. console.log, die demselben Ereignis zugewiesen sind, wird jedoch in der Konsole angezeigt. Warum passiert das und wie kann man es reparieren?

Pen: https://codepen.io/t411tocreate/pen/prZRYN

Js Code:

$(document).ready(function(){ 
    $('#showModal').on('click', function() { 
    $('.container').append(modalHtml) 
    }) 

    $(document).on('click','#closeModal',function(){ 
    console.log('click triggered') 
    $(document).remove('#modal') 
}) 

    var modalHtml = '<div id="modal"> <div class="modal-bg"></div><div class="modal-content"> <p>this is a modal</p><span id="closeModal">close</span> </div></div>' 
}) 

Answer 1

Anruf remove() direkt auf dem Element - $('#modal').remove() stattdessen verwenden - siehe Demo unter:

$(document).ready(function() { 
 
    $('#showModal').on('click', function() { 
 
    $('.container').append(modalHtml) 
 
    }) 
 

 
    $(document).on('click', '#closeModal', function() { 
 
    $('#modal').remove(); 
 
    }) 
 

 
    var modalHtml = '<div id="modal"> <div class="modal-bg"></div><div class="modal-content"> <p>this is a modal</p><span id="closeModal">close</span> </div></div>' 
 
})

#showModal { 
 
    margin: 50px 40%; 
 
    font-size: 50px; 
 
} 
 

 
#modal { 
 
    display: block; 
 
} 
 

 
#modal .modal-bg { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
} 
 

 
#modal .modal-bg:before { 
 
    content: ""; 
 
    display: block; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    background-color: rgba(43, 43, 43, 0.5); 
 
} 
 

 
#modal .modal-content { 
 
    width: 50%; 
 
    margin: 20px auto; 
 
    position: relative; 
 
    background: black; 
 
    color: #fff; 
 
    padding: 20px; 
 
} 
 

 
#modal .modal-content #closeModal { 
 
    padding: 10px; 
 
    margin: 10px; 
 
    border: 1px solid #fff; 
 
} 
 

 
#modal .modal-content #closeModal:hover { 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <button id="showModal"> Show modal</button> 
 
</div>

Answer 2

Ihr Problem ist in remove() die Verwendung des Wählers durch. Das wird als Filter verwendet - nicht um Elemente zu finden. Um dies zu beheben, die Logik wählen Sie das Element direkt und rufen remove() darauf:

$('#modal').remove(); 

Updated CodePen

Answer 3

Sie dies zu tun:

$("#modal").remove(); 

:

$(document).remove("#modal"); 

Wo sollten Sie diese tun

---

Beachten Sie auch, dass Sie nicht warten müssen, bis das DOM bereit ist, einen Handler an document zu binden.

$(document).ready(function(){ 
    var modalHtml = '<div id="modal"> <div class="modal-bg"></div><div class="modal-content"> <p>this is a modal</p><span id="closeModal">close</span> </div></div>' 

    $('#showModal').on('click', function() { 
    $('.container').append(modalHtml) 
    }) 
}) 

$(document).on('click', '#closeModal', function(){ 
    console.log('click triggered') 
    $("#modal").remove() 
}) 

Answer 4

ersetzen

$(document).remove('#modal'); 

zu

$('#modal').remove();