Min Naing Oo Min Naing Oo - 4 months ago 18
jQuery Question

jQuery on() event not firing for sweetalert2 textboxes

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.

Answer

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

  1. Delegate the event properly
Comments