JQuery on () event not firing for sweetalert2 text fields

Question

I have dynamically created text fields in sweetalert2 as follows:

swal({
    title: 'Enter Info',
    showCancelButton: true,
    html:   "<table>" +
                "<tr>" +
                    "<td>name</td>" +
                    "<td><input type='text' id='name'/></td>" +
                "</tr>"
                "<tr>" +
                    "<td>email</td>" +
                    "<td><input type='text' id='email'/></td>" +
                "</tr>"
            "</table>"
}).then(function(){
    // ajax
});

And a jQuery function to listen for a text field change event.

$(document).ready(function () { 
    <script type="text/javascript">
        $('#name').on('change', function(e) {
            console.log($(this).val());
        });
    </script>
});

But the event does not fire when the text field values ​​inside sweetalert2 change. jQuery is loaded correctly and it works with other text fields outside of the sweetalert2 model. I also tried adding <script>...</script>after the </table>above html:, but still no luck. Can someone help me please? Any input would be appreciated.

Answer 1

change $('#name').on('change', function(e) {to$(document).on('change','#name', function(e) {

Answer 2

,

$('#name').on('change', function(e) {});  // this works for static dom

$(document).on('change','#name', function(e) {});  // this works for static as well as content dynamically added in dom.