CODEWITHSUNDEEP
jquery
MajinSephiroth
MajinSephiroth

Reputation: 25

Appending jQuery using jQuery

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?

Upvotes: 1

Views: 126

Answers (3)

Cefn Hoile
Cefn Hoile

Reputation: 441

I'd be tempted to avoid any kind of 'eval' behaviour - eval is evil. This is effectively what you're doing by embedding Javascript inside of an HTML tag which is dynamically written to the DOM. http://www.jslint.com/lint.html

Why not just use event handlers bound directly to the entities you're creating, as per this kind of approach... Event binding on dynamically created elements and passing parameters

Upvotes: 0

tvanfosson
tvanfosson

Reputation: 532725

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>

Upvotes: 3

Blazemonger
Blazemonger

Reputation: 92993

Don't try appending new jQuery code. Instead, use .on to add a click event that will automatically be applied to newly-created DOM elements.

$('#container_div').on('click', 'img', function () {
    $this = $(this); // the image that was clicked 
    // extract your fileName, imageUID, and file variables somehow from $this
    removeImage(fileName, imageUID, file);
});

Upvotes: 1

Related Questions