jquery - 如何将 jquery 函数绑定到动态 DOM

Question

我在我的页面上使用 jquery 文件上传功能，如下所示：

$('.new-variant-image')
 .fileupload({ 
       dataType: 'script',
       add: function(e, data){ 
       }
});

但是 DOM 类“new-variant-image”是在页面加载后动态创建的，所以它不起作用。我搜索了使用“on”和“live”绑定动态事件的方法，但在这种情况下无法正常工作。

任何帮助将不胜感激。

编辑

之后使用 AJAX 创建 DOM 元素“new-variant-image”，如果我在创建元素之后放置代码，它就可以工作。但我想避免这种情况，因为当我多次使用 ajax 调用该函数时，它会导致浏览器挂起大约 2 到 3 秒。

Answer 1

使用函数的回调

$('.new-variant-image').fileupload({
      dataType: 'script',
     add: function(e, data),
     done: $('.new-variant-image').click(function(){
     })
{

Answer 2

您的代码$('.new-variant-image').fileupload({ dataType: 'script', add: function(e, data){应该在元素创建代码之后......

我不知道你是如何创建元素的（使用 ajax 或其他东西）......

georgi-it 所建议的应该有效......

Answer 3

虽然回答这个问题很晚，但从jQuery 1.7开始，您可以使用jQuery.fn.on。

$(document).on("click", ".new-variant-image", function () {
    $('.new-variant-image')
            .fileupload({
                dataType: 'script',
                add: function (e, data) {
                }
            });
})

这为所有存在的元素或动态附加的元素附加了事件处理函数class new-variant-image。