I have dynamically created textboxes in sweetalert2 like this:

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 jQuery function to listen textbox change event.

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

But event is not being fired when changing textbox values inside sweetalert2. jQuery is properly loaded and it works on other textboxes outside of sweetalert2 model. I've also tried adding <script>...</script> after </table> in above html: but still no luck. Can somebody help me out please? Any input would be greatly appreciated.

I have dynamically created textboxes in sweetalert2 like this:

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 jQuery function to listen textbox change event.

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

But event is not being fired when changing textbox values inside sweetalert2. jQuery is properly loaded and it works on other textboxes outside of sweetalert2 model. I've also tried adding <script>...</script> after </table> in above html: but still no luck. Can somebody help me out please? Any input would be greatly appreciated.

• javascript
• jquery
• sweetalert
• sweetalert2

• 2 change $('#name').on('change', function(e) { to $(document).on('change','#name', function(e) { – guradio Commented Jul 28, 2016 at 6:53
• @guradio it works! Thanks for very fast reply. Would u like to post this in the answer so I that I can accept? – Min Naing Oo Commented Jul 28, 2016 at 6:57
• sure i will post it – guradio Commented Jul 28, 2016 at 6:59

2 Answers 2

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

1. Delegate the event properly

this happens because you are using

$('#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.