Question

我使用ajaxsumit成功将文件上传到linux服务器。

上传文件完成后，文件名和大小将显示在我的网站上，并带有一个替代文件按钮。

但是当鼠标悬停在文件名上时，无法显示cancelfile按钮。我不知道为什么？谁可以帮助我？

$(document).ready(function(){
    $('#filename').mouseover(function(){
        $('#cnlbtn').css("display","block");
    });
    $('#filename').mouseout(function(){
        $('#cnlbtn').css("display","none");
    });
});

$("#fileupload").change(function(){
    $("#myupload").ajaxSubmit({
        dataType:  'json',
        beforeSend: function() {},
        uploadProgress: function() {},
        success: function(data) {
            files.html("<br />"+"<b id='filename'>"+data.name+"("+data.size+"k)</b> <span class='delimg' rel='"+data.pic+"' id='cnlbtn'>cancelfile</span>");
            btn.html("addfile");
        },
        error:function(xhr){}
        });

我的delimg风格：

   .delimg{margin-left:20px; color:#090; cursor:pointer;display:none}

Answer 1

Is not working because when you add the event listener the tag does not exist yet in the DOM. As Joe B. said you need to use event delegation: jQuery Doc Direct and delegated events

So you have to do something like this:

$(document.body).on('mouseover', '#filename', function(){
    $('#cnlbtn').css("display","block");
});
$(document.body).on('mouseout', '#filename', function(){
    $('#cnlbtn').css("display","none");
});

鼠标悬停在b标签上时如何显示span按钮？

1 个答案: