Question

我的js文件中有一个条件，其中文件上传触发我的jQuery为每个返回的值附加以下元素，但是我在与链接关联的删除范围标记上的单击触发器出现问题。我看到url出现在url中，表示点击该元素，但我的console.log没有触发，向我显示某些内容已关闭。

这是我的图片后上传jQuery：

$("#file-input").on('change', function(){
        var files = $(this).get(0).files;

        if (files.length > 0){
            var formData = new FormData();

            for(var i = 0; i < files.length; i++){
                var file = files[i];
                console.log(files[i]);
                formData.append('fileUpload', file, file.name);
            }

            $.ajax({
                url: '/app/sign',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(data){
                    for(var i = 0; i < data.length; i++){
                        console.log('This is the element ' + data[i]);
                        $('.file-preview').append("<a href='" + data[i] + "'>" + data[i] + "</a><a href='#' class='remove-file' data-file-link='" + data[i] + "'><span class='glyphicon glyphicon-remove'></a><br>");
                    }
                },
                error: function(error){
                    console.log('error ' + JSON.stringify(error));
                }
            });
        }
        if (files.length > 5){
            alert('You can only upload a maximum of five files at this time');
            return false;
        }
    });

强调附加的HTML：

$('.file-preview').append("<a href='" + data[i] + "'>" + data[i] + "</a><a href='#' class='remove-file' data-file-link='" + data[i] + "'><span class='glyphicon glyphicon-remove'></a><br>");

点击.remove-file后，我看不到console.log或alert：

$('.remove-file').on('click', function(){
    console.log('Delete Triggered');
    var fileLink = $(this).data('file-link');
    alert(fileLink);
    /*alert($(this).attr('href'));
    $.ajax({
        url: '/app/sign',
        type: 'DELETE',
        data: fileLink,
        success: function(){
            $('.file-preview').remove();
        },
        error: function(error){
            console.log('error ' + JSON.stringify(error));
        }
    })*/
});

Answer 1

$(document).on('click','.remove-file', function(){

试试这个

jQuery不触发跨度单击附加元素

1 个答案: