Question

我有一个问题。

我使用Ajax将一些图像从HDD上传到网站; 成功后，我将结果附加到显示图像的列表和删除图像的按钮（删除过程也在ajax中）。

如果我加载图像，则删除按钮不起作用，只有在刷新一次后才能正常工作。

我如何将它绑定到ajax成功的工作？

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

            }
        });

提前感谢您的帮助。

Answer 1

您可能忘记了<a id="delete" class="ir delete" href="">delete</a>的jquery代码，但我认为您有类似的内容：

$("a.delete").click(function(e) {
    // some ajax call here
});

如果您将click事件更改为live事件，则可能会解决您的问题

$("a.delete").live("click", function(e) {
    // some ajax call here
});

Answer 2

在jQuery中绑定事件时，事件将添加到jQuery选择器创建的jQuery元素集中的所有元素。这只执行一次，如果添加与该选择器匹配的元素，则仍然必须将事件绑定到新插入的元素。或者;你可以使用.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);

我也注意到代码中可能会导致问题的两件事：

您正在使用静态ID属性添加元素。建议每页只使用一次ID。
buttonEvents（）;可能是你的回调将事件绑定到按钮。如果是这样的话;每次添加按钮时，都会将事件绑定到所有按钮，导致事件多次绑定到某些按钮。

将事件绑定到ajax成功附加元素

2 个答案: