javascript - jquery文件上传不触发点击动态生成的输入

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