-1

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&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]));
}
Kelseyyyyyyyyy
  • 15
  • 4
  • 1
    You search the document for the ID so you can add the event listener. You don’t find it so can’t. Later you add an element with that ID. It is too late. You aren’t looking for it now. – Quentin Feb 24 '23 at 07:25
  • 1
    Don't mix vanilla JS with jQuery! In fact, as of 2023, there is no need to use jQuery anymore. The advantages of jQuery are diminishing and have a questionable value compared to the performance and possibilities within vanilla JS. – tacoshy Feb 24 '23 at 07:25

1 Answers1

1

Use event delegation on the modal:

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

});
Unmitigated
  • 76,500
  • 11
  • 62
  • 80