jQuery 中复制元素的绑定问题

Question

这实际上是一个更大的问题，因为我知道有多种方法可以解决这个问题，但我会尝试总结一下。

我尝试做的事情：我正在使用这个 jQuery 插件通过 Flash http://www.uploadify.com/ 上传文件。但是，我应该将此函数绑定到的元素 #fileInput 是一个活动元素，它是在页面加载后生成的：$('#fileInput').uploadify()。 #fileInput 是一个活动元素的原因是因为我使用 FancyBox 弹出一个 DIV，而这个 FancyBox 基本上只是“克隆”了 DIV 的内部 html。

发生了什么：当我点击“浏览”上传文件时，没有上传进度条。原因是 Uploadify 无法绑定到活动元素。

问题： 1.我尝试在uploadify代码中将bind()替换为live()，但这不起作用，因为bind()允许传递[数据]。 LiveQuery 插件 http://docs.jquery.com/Plugins/livequery 没有与bind() 的语法相同。有没有类似于绑定但适用于活动元素的东西？

2. 如果我不尝试替换bind()函数并保持uploadify代码相同。有谁知道如何更改 FancyBox 中的代码，以便它不会进行克隆来生成活动元素？我知道这也是一个很难的问题。

注意：FancyBox 网站似乎已经死了 --> http://www.visual-blast.com/javascript /fancybox-jquery-image-zooming-plugin/

非常感谢！

Answer 1

您可以考虑更改 FancyBox 代码以支持在克隆 HTML 后调用回调函数。然后，将 uploadify() 调用放入回调函数中。

Answer 2

您可以重载 live 方法，使其支持 data 作为第二个参数：

jQuery.fn.live = (function(_live){
    return function( type, data, fn ) {

        var _fn;

        if ( jQuery.isFunction(fn) ) {
            _fn = function(e) {
                e.data = data;
                return fn.call( this, e );
            };
        }

        return _live.call( this, type, _fn || fn || data );
    };
})(jQuery.fn.live);

替换 data 的所有实例>bind(...) 与 live(...) 现在应该可以工作了。

注意：您必须将重载方法放在其他所有方法之上。

Answer 3

根据我的经验，我发现做到这一点的唯一方法是使用 livequery

它具有类似的语法，在您的情况下要在实时元素上绑定 uploadify，您将使用

$('#fileInput').livequery(function(){
  $(this).uploadify();
})

Livequery 接受没有事件的函数，并在每次有事件时执行它们DOM 的改变

Answer 4

元素是如何生成的？如果它使用 jQuery 从服务器获取，您可以使用更黑客的方式来修复它，只需将 jQuery 在它遇到的任何脚本标签上运行 eval() ，这样您就可以将：

<script type='text/javascript'>
$(function(){
    $('#fileInput').uploadify();
});
</script>

在获取的 html 中，它会将其绑定到加载而不是试图实时观看它。奖励积分，如果你再次获取 html，它将被解除绑定。