Question

我动态生成输入div，然后尝试将图像导入div但文件上传不起作用。我有一个用于文件上传的图像按钮，而不是选择文件。

(function() {
    var fileTriggers = $('.js_file_emit');
    $('#row_container').on('click', '.js_file_emit', function() {
        debugger;
        console.log($(this).attr('data-file'));
        $($(this).attr('data-file')).live('click', function(e) {
            $('#' + $(this).attr('data-file')).on('change', function() {
                handleFiles($(this).files, $(this).attr('data-preview'));
            });
        })
    })
})();

如果我有预定义的输入，代码正在运行。 http://jsfiddle.net/xnf0bht7/9/

这就是我生成div的方式

function updatePopupRows(data) {
    var l_sRowContainer = "#row_container",
        l_sNameTemp = null,
        l_sRowTemp = null,
        l_sRowHeader = null,
        l_sImgTemp = null,
        l_sFileTemp = null,
        l_sPrevTemp = null;

    $(l_sRowContainer).html('');

    for (var i = 0; i < data.data.length; i++) {
        l_sRowTemp = document.createElement('div');
        $(l_sRowTemp).attr('class', 'row');

        l_sRowHeader = document.createElement('div');
        $(l_sRowHeader).attr('class', 'row_header_fancybox');

        l_sNameTemp = document.createElement('span');
        $(l_sNameTemp).html(data.data[i].name);

        l_sImgTemp = document.createElement('input');
        $(l_sImgTemp).attr('type', 'image').attr('class', 'js_file_emit').attr('id', 'js_file_emit').attr('src', '/toogle/resources/js/slickgrid/add.png').attr('data-file', 'group' + data.data[i].name + i);

        l_sFileTemp = document.createElement('input');
        $(l_sFileTemp).attr('type', 'file').attr('multiple', 'true').attr('id', "group" + data.data[i].name + i).attr('data-preview', 'preview' + data.data[i].name + i);

        l_sPrevTemp = document.createElement('div');
        $(l_sPrevTemp).attr('id', 'preview' + data.data[i].name + i);

        $(l_sRowHeader).append(l_sNameTemp).append(l_sImgTemp).append(l_sFileTemp).append(l_sPrevTemp);
        $(l_sRowTemp).append(l_sRowHeader);
        $(l_sRowContainer).append(l_sRowTemp);
    }
}

HTML：

 <div id='row_container'></div>

Answer 1

所有单击侦听器都应使用.on（'click'，'selector'，function（）{}）语法（在嵌套单击中使用不推荐使用的“live”方法）。页面加载时可以加载单击侦听器。无论何时添加元素，还要为其指定用于设置单击侦听器的类。

您必须包含preventDefault（）调用，以防止子项单击冒泡并触发父操作。以下是使用单击侦听器动态创建的元素的示例：

http://jsfiddle.net/iaretyler/qwn0a8k4/

注意我已经在页面上有点击监听器，我只是用适当的类创建了元素。使用“更改”监听器

也应该这样做

您还应该检查使用jQuery创建新元素。它简化了创作。你可以改变这个：

l_sRowTemp =document.createElement('div');
$(l_sRowTemp).attr('class','row');

到此（注意属性进入第二个参数：

var l_sRowTemp = $('<div>', {class: "row"});
//Now append to whatever

jquery文件上传未触发动态生成的输入

1 个答案: