Question

I have a problem.

I upload some images from HDD to the website using Ajax;
on success I append the result inside a list that show the image and a button for delete the image (the delete process is in ajax too).

If I load an image the button for delete doesn’t work, it works only after one refresh.

How can I bind it to work on ajax success as well?

var uploader = new qq.FileUploader({
            element: document.getElementById('file-uploader-demo1'),
            allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'],
            sizeLimit: 21474836, // max size
            action: '/FileUpload/FileUpload',
            multiple: false,
            debug: true,
            params: {
                param1: imgId
            },
            fileTemplate: '<li>' +
                    '<span class="qq-upload-file"></span>' +
                    '<span class="qq-upload-spinner"></span>' +
                    '<span class="qq-upload-size"></span>' +
                    '<a class="qq-upload-cancel" href="#">Cancel</a>' +
                    '<span class="qq-upload-failed-text"></span>' +
                '</li>',
            onComplete: function (id, fileName, result) {
                var lista = $('ul.uploaded-images');
                lista.prepend('<li><img src="/img/' + imgId + '/' + result.filename + '" /><a id="delete" class="ir delete" href="">delete</a></li>');
                buttonEvents();
                qq.FileUploaderBasic.prototype._onComplete.apply(this, arguments);

                // mark completed
                var item = this._getItemByFileId(id);
                qq.remove(this._find(item, 'cancel'));
                qq.remove(this._find(item, 'spinner'));

                if (result.success) {
                    qq.addClass(item, this._classes.success);
                } else {
                    qq.addClass(item, this._classes.fail);
                }

            }
        });

Thanks in advance for your help.

Answer 1

When binding an event in jQuery, the event is added to all elements in the jQuery element set created by your jQuery selector. This is done only once and if you add elements that would match that selector, you still have to bind the events to the newly inserted elements. Or alternatively; you can use .live();.

// bind a callback to the click event of all
// elements currently present with id "delete" 
$('#delete').click(callback);

// bind a callback to the click event of all
// elements currently present with id "delete" 
$('#delete').bind('click', callback);

// bind a callback to the click event of all elements currently present 
// with id "delete", and elements that are later inserted with id "delete"
$('#delete').live('click', callback);

I am also noticing 2 things in your code that might cause problems:

1. You are prepending an element with a static ID attribute. It is recommended to only use a certain ID once per page.
2. buttonEvents(); might be your callback to bind the events to the buttons. If this is the case; you are binding the events to all buttons every time a button is added, resulting in the event being bound to some buttons multiple times.