Javascript - Jquery .live()答案

【问题标题】：Javascript - Jquery .live()Javascript - Jquery .live()
【发布时间】：2011-01-06 11:21:58
【问题描述】：

我有一个深度嵌套的表单，其中的元素级别由用户动态添加和删除（使用 Ryan Bates 的复杂表单示例中的 Jquery-deep branch）。我为这些元素中的每一个附加了一些 Javascript 函数，但在添加新元素时我无法让它们保持 .live()。

我正试图让它与 James Padolsey 的 Autoresize 一起工作：

# This code functions but only for existing elements. How to make it .live()?
<%= javascript_include_tag "autoresize.jquery.min" %>
<script type="text/javascript">
$('#notes, textarea, .optionBox').autoResize({
    onResize : function() {
        $(this).css({opacity:0.8});
    },
    // After resize:
    animateCallback : function() {
        $(this).css({opacity:1});
    },
    animateDuration : 150,
    extraSpace : 0,
    limit : 210
  });
</script>

我尝试了几种插入 .live() 函数的方法，但没有奏效。我怎样才能让它在这里发挥作用？

【问题讨论】：

标签： javascript ruby-on-rails ruby-on-rails-3 jquery

【解决方案1】：

查看插件livequery

使用示例

$('textarea').livequery(function(){

        if ($(this).attr("class") != "resized"){
            $(this).attr("class","resized");

            $(this).autoResize({
            // On resize:
            onResize : function() {
                $(this).css({opacity:0.8});
            },
            // After resize:
            animateCallback : function() {
                $(this).css({opacity:1});
            },
            // Quite slow animation:
            animateDuration : 300,
            // More extra space:
            extraSpace : 40
            });


        }

    });

【讨论】：

livequery 与 JQuery 的 .live() 有何不同？ .live() 本身不能解决这个问题吗？
我更新了示例。我刚刚检查过 - 它工作正常。这只是绑定事件等的另一种方式。例如，您不需要定义事件类型 - 代码将在更新页面后为每个元素运行“Live Query 通过绑定事件或触发匹配事件的回调来利用 jQuery 选择器的强大功能即使在页面加载并更新 DOM 之后，元素也会自动神奇地"
另一种方法是在更新 DOM 元素后添加 .autoResize。例如，您可以将“可调整大小”类添加到已经可调整大小的元素。 $("a").live("click",function(){ $("textarea[class!=resizable]").autoResize(...) }) 并在动画回调中添加 $(this).attr （“类”，“可调整大小”）
Livequery 占用了我的处理器，以至于表单无法再输入！
知道了。所以，我认为在你的情况下最好的方法是在添加一个新的 textarea 之后，你应该为最后添加的 textarea 调用 .autoResize() ...

【解决方案2】：

你有没有看过更喜欢的方法，delegate

【讨论】：

我将如何实现委托，Aaron？
你给它一个上下文节点，这样它就可以与当前或未来的节点一起工作。确保上下文节点没有被您的回调替换
Aaron，我让代理与$("body").delegate('#notes, textarea, .optionBox', "click", function(){ 一起工作...但是页面非常慢 - 它似乎占用了处理器使用率，以至于在 text_areas 中输入延迟！这到底是怎么加速的？
你能让上下文更接近你想要定位的元素吗？ James Padolsey 是一名优秀的编码员，所以我怀疑他的代码效率低下。您可以尝试给他发电子邮件或发推文给他。很难知道你是否正在做任何其他会减慢它的事情，但没有看到你的实现。尝试将您的代码放在 jsfiddle 上

【解决方案3】：

你可以在休闲的方式使用直播功能

$('#notes, textarea, .optionBox').live('click',autoResize({
onResize : function() {
    $(this).css({opacity:0.8});
},
// After resize:
animateCallback : function() {
    $(this).css({opacity:1});
},
animateDuration : 150,
extraSpace : 0,
limit : 210   }););

事件可以是onclick、onfocus...等。
即使您可以附加处理程序并通过该处理程序调用 autoResize。

【讨论】：

标准 .live() 用法在这里不起作用，因为 autoResize 不会以这种方式处理事件 - 查看我提供的代码。
您可以附加一个事件处理程序并将调整大小的代码放入该处理程序中......我认为这应该可以工作。
Vivek - 对不起，我对 JavaScript 不是很熟悉 - 你能告诉我我在代码中需要做什么吗？
是的，没有运气。看，从我的原始代码来看——函数 autoResize 依赖于它自己的 .js 文件，我们不向它传递任何事件（例如“点击”）。这就是为什么我认为它不起作用。

【解决方案4】：

和你一样的问题，使用事件“点击”，但需要在 textarea 上额外点击鼠标，事件“焦点”效果很好，但在文本区域活动后文本消失（就我而言）

            $('textarea').live('click', function() {
                        $(this).autoResize({
                            // On resize:
                            onResize : function() {
                                $(this).css({opacity:0.8});
                            },
                            // After resize:
                            animateCallback : function() {
                                $(this).css({opacity:1});
                            },
                            // Quite slow animation:
                            animateDuration : 300,
                            // More extra space:
                            extraSpace : 10
                        });

                });

【讨论】：

【解决方案5】：

我的工作解决方案：

                   $('textarea').live('focus blur', function(event) {
                        if (event.type == 'focus') {
                            $(this).autoResize({
                                // On resize:
                                onResize : function() {
                                    $(this).css({opacity:0.8});
                                },
                                // After resize:
                                animateCallback : function() {
                                    $(this).css({opacity:1});
                                },
                                // Quite slow animation:
                                animateDuration : 300,
                                // More extra space:
                                extraSpace : 10
                            });
                        }
                        else
                        {
                            $(this).die();
                        }
                });

【讨论】：

【解决方案6】：

这种情况的更好解决方案：使用这个插件link text 那么代码是：

 $('textarea').live('focus', function() {
    $(this).elastic();
 });

【讨论】：