做了一个上传文件的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  :' +
'<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]));
}
在模态上使用事件委托:
$('#ItemModal').on('input', '#insideByjquery', function(e){
});