Appending jQuery using jQuery

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?

omg, no no no. Where did this "insert script" business come from? Please described the desired page functionality without this "appending scripts". What HTML starts on the page, what does the user do, what is the desired result? — Sinetheta
– Sinetheta, Commented Jan 9, 2012 at 19:45
I suspect that the document ready event is never fired for your inserted scripts. (Because the document is already loaded and that event has already fired by the time you insert the new script tag.) But I don't recommend trying to fix that. Instead, follow the advice given in the answers. — dgvid
– dgvid, Commented Jan 9, 2012 at 21:26

tvanfosson · Accepted Answer · 2012-01-09 19:51:40Z

3

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>

answered Jan 9, 2012 at 19:51

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MajinSephiroth Over a year ago

Awesome, this is what I was looking for. Did not know you could attach data to tags.

Blazemonger · Accepted Answer · 2012-01-09 19:50:40Z

1

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);
});

answered Jan 9, 2012 at 19:50

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:03:14Z

0

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

edited May 23, 2017 at 12:03

CommunityBot

11 silver badge

answered Jan 9, 2012 at 19:57

Cefn Hoile

4412 silver badges9 bronze badges

Collectives™ on Stack Overflow

Appending jQuery using jQuery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related