$("#id").on("输入", function () { }} );当 .innerHTML 由 Javascript 代码生成时不起作用 [重复]

Question

做了一个上传文件的input元素，想在上传文件的时候触发js编码。每次在模态弹出窗口中都需要通过 JS 代码生成 input 元素。但我发现 $("#id").on("input", function () { }} );当 innerHTML 由 Javascript 代码通用时不起作用，但 oninput="function()" 可以。

请参阅以下链接以查看编码。 https://jsfiddle.net/x41voszh/1/

虽然我可以使用 function() 来实现我的要求。但是因为我想知道为什么 $('#id') 在 innerHTML 时不起作用，所以任何人都可以解决我对这种情况的误解吗？我真的很想学习它。非常感谢！

HTML：

<div class="">
    Coding by HTML: 
    <input id="outsideByjquery" type="file" oninput="testing()" accept="image/*,.pdf" multiple>
</div>
<div class="" id="ItemModalBody" style="">
              
</div>

JavaScript：

function add_RequestedItems() {
  var divtest = document.getElementById('ItemModalBody')
  divtest.innerHTML = 'Coding by JS: <br><br>'+
                      'Success &nbsp:' +
                      '<input id="insideByjavascript" type="file" oninput="testing()" accept="image/*,.pdf" multiple>' +
                      '<br>(by oninput="testing()")<br><br>' +
                      'Failure&nbsp;&nbsp;&nbsp;:' +
                      '<input id="insideByjquery" type="file" accept="image/*,.pdf" multiple>' +
                      '<br>(by jquery")';

  $('#ItemModal').modal('show')
}


$("#insideByjquery").on("input", function () {
  alert("inside testing")
});

$("#outsideByjquery").on("input", function () {
  alert("outside testing")
});

function testing(){
  alert(window.URL.createObjectURL($("#insideByjavascript")[0].files[0]));
}                                                                                                           

Answer 1

在模态上使用事件委托：

$('#ItemModal').on('input', '#insideByjquery', function(e){

});