文章/答案/技术大牛

发布

社区首页 >问答首页 >将事件绑定到ajax成功附加元素

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

Stack Overflow用户

提问于 2011-10-18 22:47:21

回答 2查看 1.7K关注 0票数 0

我有个问题。

我上传一些图片从硬盘使用ajax到网站；如果成功，我将结果附加到一个显示图像的列表和一个删除图像的按钮中(删除过程也在ajax中)。

如果我加载了一张图片，删除按钮不起作用，它只能在一次刷新后起作用。

如何将其绑定到ajax success上？

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

            }
        });

提前感谢您的帮助。

binding

file-upload

jquery

ajax

events

回答 2

Stack Overflow用户

回答已采纳

发布于 2011-10-18 23:19:19

在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属性的元素添加前缀。建议每个page.
buttonEvents()；只使用某个ID一次，这可能是您的回调，以将事件绑定到按钮上。如果是这种情况，则每次添加按钮时都会将事件绑定到所有按钮，从而导致事件多次绑定到某些按钮。

票数 1

Stack Overflow用户

发布于 2011-10-18 23:11:29

您可能忘记了<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
});

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/7809202

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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