Question

So apparently I’m trying to do something that jQuery does not like.

I’m using javascript to upload pictures. Every time a picture is uploaded I want it to be visible as well as have a working remove script attached to it. The display works fine, the remove does not because it does not exist on the page when I inspect it with firebug.

This is the script for removing the file:

var insertScript = "<";
insertScript += "script type='text/javascript'>jQuery(document).ready(function($){ $('#Remove_" +
    file + "').click(function() { removeImage(\"" +
    fileName +"\", \""+ imageUID +"\", \"" +
    file + "\"); }); });";
    insertScript += "<";
    insertScript += "\/script>";

In my page I have a div tag that holds all the images, so I am appending to it every time an image is uploaded as such:

jQuery(document).ready(function($) {
    $('#ImageBar').append(insertScript);
    $('#ImageBar').append(insertHTML);
});

The insertHTML variable holds a div tag with the image inside of it and a remove button. No javascript/jquery in it. It appends fine. The insertScript does not append at all.

I tried on a hunch to remove the jQuery from the insertScript and replace it with a simple javascript alert and test if it was the tags that mess it up, and it’s not. The alert worked fine when appended. Which leads me to believe that jQuery does not like appending jQuery. Is there another way of going about doing this?

Answer 1

I would suggest that you use data attributes on your image tags for the image to store the data needed for the removal. You can then give the closer button a class and use a document-level handler that filters elements with that class for the handler. Use the relative positioning of the button to get access to the image.

<span class="image-container">
<img  data-filename="foo.png" data-imageuid="35" data-file="foo" ... />
<button class="remove-image">X</button>
</span>

With a script on your page as:

<script type="text/javascript">
    $(function() {
         $(document).on('click','.remove-image', function() {
             var $button = $(this),
                 $img = $button.prev('img'),
                 $container = $button.closest('.image-container');
                 removeImage( $img.data('filename'), $img.data('imageuid'), $img.data('file') );
                 $container.remove();
         });
    });
</script>