jQuery的on（）事件不觸發對sweetalert2文本框

Question

我已動態創建文本框在sweetalert2這樣的：

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 
}); 

和jQuery函數監聽文本框更改事件。

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

但是，在更改sweetalert2中的文本框值時，事件未被觸發。 jQuery被正確加載，它可以在sweetalert2模型之外的其他文本框中使用。我也嘗試在</table>之後加上<script>...</script>以上html:但仍然沒有運氣。有人可以幫我嗎？任何投入將不勝感激。

Answer 1

變化$('#name').on('change', function(e) {到$(document).on('change','#name', function(e) {

1. 代表時的正確

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.