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

【问题标题】：How to bind jquery function to a dynamic DOM如何将 jquery 函数绑定到动态 DOM
【发布时间】：2013-04-07 09:20:17
【问题描述】：

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

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

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

非常感谢任何帮助。

编辑

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

【问题讨论】：

在 jQuery 选择器上调用方法时，选择器必须返回一个元素。正如您正确指出的那样，如果动态添加元素，这将不起作用。将on 与委托一起使用不会对您有任何好处，因为您不希望绑定到事件，而是希望针对元素执行方法。加载元素后，您必须调用.fileupload。如果您多次调用 ajax 调用，您还必须重新执行 .fileupload，因为每次重新添加元素时，与该元素的插件关联都会被破坏。
嗨，François Wahl 感谢您的解释。
@user1883793：您可能需要稍微重新设计围绕 AJAX 调用的逻辑以不同方式加载元素集，防止重新加载某些元素，或者如果可能的话，也许您可以在所有 AJAX 调用完成后调用一个方法，并与该方法中的元素进行文件上传关联。

标签： jquery dynamic-binding jquery-file-upload

【解决方案1】：

使用函数的回调

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

【讨论】：

如果我把它放在 DOM (.new-variant-image) 创作之前会起作用吗？谢谢
我不明白你的意思，但基本上它只有在 done: 函数在 DOM 元素 .new-variant-image 存在之后执行。

【解决方案2】：

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

我不知道您是如何创建元素的（使用 ajax 或其他方式）...

georgi-it 所建议的应该可行...

【讨论】：

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

【解决方案3】：

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

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

这为所有当前元素或动态附加元素附加事件处理函数，类new-variant-image。

【讨论】：