I have many images which are created dynamically and I am showing them inside an empty div. And now I have a <span>tag where I am showing the delete button to delete the image with small fading animation. Now when I click nothing happens! I am not very much sure what I m doing?

因此,我需要你们的帮助!

我的守则是:

Css:

<style type="text/css">
#container 
{

border:dashed 7px #808080;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 25px;
    width: 360px;
    height: 285px;
    position:absolute;
    left:520px;
    top:120px;
    padding: 0 0 5px 0;


}
#container a 
{
    position:relative; 
    border: 1px solid blue;
    float: left;
    display: block;
    width: 64px; height: 64px;
    margin: 5px 0 0 5px
}
#container a:visited {
    border: 1px solid #90f
}
#container img {
    border: 0;
}

#container a span { display:none; background-image:url(images/delete.gif); background-repeat:no-repeat; width:16px; height:16px; position:absolute; right:0px; top:0px;} 
#container a:hover span { display:block;} 
</style>

原文:

<script>
$("a span").click(function() {
    $("#container img").fadeOut("normal", function() {
        $(this).remove();
    });
});
</script>

展示集装箱 图像:

<div id="container">

</div>

这是我用Plupload图像和显示的文字:

   <script type="text/javascript">
    $(function () {
        document.getElementById( Nextbutton ).style.visibility = "hidden"; // show 
        $("#uploader").plupload({
            // General settings
            runtimes:  gears,flash,silverlight,browserplus,html5 ,
            url:  Test.aspx ,
            max_file_size:  10mb ,
            max_file_count: 20,
            chunk_size:  1mb ,
            unique_names: true,

            filters: [
            { title: "Image files", extensions: "jpg,gif,png" },
            { title: "Zip files", extensions: "zip" }
        ],


            flash_swf_url:  js/plupload.flash.swf ,


            silverlight_xap_url:  js/plupload.silverlight.xap 
        });



        $( form ).submit(function (e) {
            var uploader = $( #uploader ).plupload( getUploader );

            if (uploader.files.length > 0) {

                uploader.bind( StateChanged , function () {
                    if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
                        $( form )[0].submit();
                    }
                });

                uploader.start();

            }
            else
            //alert( You must at least upload one file. );

                return false;
        });
        var uploader = $( #uploader ).plupload( getUploader );

        uploader.bind( FilesAdded , function (up, files) {
            //              jQuery( #container a ).html(  );
            $( #container > * ).remove();
            var i = 0;
            while (i++ < up.files.length) {
                var ii = i;
                while (ii < up.files.length) {
                    if (up.files[i - 1].name == up.files[ii].name) {
                        $.msgBox({
                            title: "Ooops",
                            content: "There is already an image with the same filename and cannot be added.",
                            type: "error",
                            showButtons: true,
                            opacity: 0.9,
                            autoClose: false
                        });
                        uploader.removeFile(up.files[ii]);
                    } else {
                        ii++;
                    }
                }
            }
            if (i > 20) {
                $.msgBox({
                    title: "Info",
                    content: "Uuh! Please don t put me any more files.<br>Maximum Upload limit is only 20 Images.<br>Rest of the Images will be removed.",
                    type: "info",
                    showButtons: true,
                    opacity: 0.9,
                    autoClose: false
                });
                $( #uploader_browse ).hide();
            }
        });
        uploader.bind( FilesRemoved , function (up, files) {
            if (up.files.length < 20) {
                $( #uploader_browse ).fadeIn("slow");
            }
        });


        uploader.bind( FileUploaded , function (up, file, res) {
            $( #container ).append("<div class= container a ><a href= uploads/" + document.getElementById("currentDirectory").value + "/" + file.name + "  target= blank ><img src= uploads/" + document.getElementById("currentDirectory").value + "/" + file.name + "  width= 64  height= 64 /></a></div>");


            $("#container a").append("<span></span>");
            $("#container a").hover(function () {
                $(this).children("span").fadeIn(200);
            }, function () {
                $(this).children("span").fadeOut(600);
            });


            var $imageContainers = $( #container a );

            $imageContainers.each(function (index) {
                $(this).delay(index * 50).fadeTo(400, 0.5);
            });

            $imageContainers.mouseover(function () {
                $(this).css( opacity , 1);
                $(this).find( span.del ).show();
            });
            $imageContainers.mouseout(function () {
                $(this).css( opacity , 0.5);
                $(this).find( span.del ).hide();
            });


            if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
                document.getElementById( Nextbutton ).style.visibility = "visible"; // show 
                showStickySuccessToast();
            }
            uploader.removeFile(file);
        });

    });


     function randomString(length) {
         var chars =  0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz .split(  );

         if (!length) {
             length = Math.floor(Math.random() * chars.length);
         }

         var str =   ;
         for (var i = 0; i < length; i++) {
             str += chars[Math.floor(Math.random() * chars.length)];
         }
         return str;
     }

    </script>