创建元素后jquery函数不起作用[重复]

Question

我想在创建输入元素后添加一个函数。但它没有用。这是我的代码。

 <p id="pp">

    <input type="button" onclick="add();" value="Add Template"/><br>
    Photo: <input type="file" id="chooseFiles" name="photo[]"  class="inputFile"><br>

    </p>

    <script type="text/javascript">
    function add(){

        var text = document.createTextNode("Photo: ");

        var input = document.createElement("input");
        input.type="file";
        input.name="photo[]";
        input.class="inputFile";

    };


$(".inputFile").change(function (e) {

    for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {

        var file = e.originalEvent.srcElement.files[i];

        var img = document.createElement("img");
    img.style.width='300';
    img.style.height='auto';

        var reader = new FileReader();
        reader.onloadend = function () {
            img.src = reader.result;
        }

        reader.readAsDataURL(file);
        $(this).after(img);
    }
});

</script>

现有输入有效。但是在createElement之后，函数add()不起作用..

Answer 1

您需要delegate 事件处理程序才能处理动态创建的元素，例如

$(document).on("change",".inputFile",function (e) {})