$("#id").on("input", function () { }} ); is not working when .innerHTML is generated by Javascript code

I made an input element for uploading files, and wanna to trigger js coding when files are uploaded. The input element needs to be generated by JS code everytime in modal pop-up windows. But i found that $("#id").on("input", function () { }} ); is not working when the innerHTML is general by Javascript code, but oninput="function()" can.

Please see the below link for seeing the coding.
https://jsfiddle.net/x41voszh/1/

Althought I can use function() to achive my requirement. But since I am wondering why $('#id') is not working when the innerHTML is gerenated by js code, can anyone please fix my misknowledge on this case? I really want to learn it. Thanks a lot!

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   :' +
  					  '<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]));
}                                                                                                           

Use event delegation on the modal:

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

});