如何绑定Live（）上的滚动事件？ [英] How bind the scroll event on a Live()?

问题描述

前段时间我为某人希望他的textarea增长。我已经创建了一个函数来监听该区域的 scroll 和 keyup 事件，并重新计算行数。我想在另一个项目中使用代码，但是有一个问题。 textarea不知道为了解决这个问题，我使用 live 而不是 bind ，以便将来的区域将是绑定也是。

A while ago I've solve an issue for someone that wanted his textarea to grow. I've made a function that listens to the scroll and keyup events of the area and recalculates the number of rows. I wanted to use the code in another project, but there's a problem. The textarea's are not know To solve this, I'm using live instead of bind, so that future area's will be bound as well.

现在我发现 live 的执行速度比<$ c $慢很多C>结合。我已经创建了关于jsFiddle的简化示例。上面的textarea表现得像我想要的那样，但是由于后期信号（我正在使用Chrome），新添加的闪烁区域闪烁。

Now I'm finding that the live executes a lot slower than a bind. I've created a simplified example on jsFiddle. The upper textarea behaves as I want, but newly added ones flicker due to the late signaling (I'm using Chrome).

我怎么能使 live 与 bind 一样快？ 问题在于 scroll 不能与 live 语句一起使用。 有没有办法为 启用滚动？是否有可能有jQuery事件告诉我已经添加了一个新的TextArea，所以我可以使用bind在新创建的元素上添加 scroll ？

How can I make the live as fast as the bind? The problem is that the scroll can't be used with a live statement. Is there a way to enable scroll for live? Is there maybe a jQuery event that signals me that a new TextArea has been added, so I can use a bind to add the scroll on the newly created element?

我期待着您的想法。

编辑：更改了代码的链接。删除了scrollingCode。添加了另一个按钮来创建不同的textarea。问题与'滚动'有关。它不会触发。

Changed link to the code. Removed scrollingCode. Added another button to create a different textarea. The problem has to do with 'scroll'. It doesn't fire.

澄清：我不知道什么函数会创建textarea。我看到 Chrome 中动态添加的框闪烁。

Clarification: I will not know what function will create the textarea's. I see flickering on the dynamically added boxes in Chrome.

对于未来的读者：

在jQuery 1.3.x中，只有以下
JavaScript事件（除了
自定义事件）可以绑定
.live（）： click，dblclick，keydown，
keypress，keyup，mousedown，mousemove，
mouseout，mouseover和mouseup 。作为
的jQuery 1.4，.live（）方法
支持自定义事件以及冒泡的所有
JavaScript事件。截至
jQuery 1.4.1甚至焦点和模糊工作
with live（映射到更多
适当，冒泡，事件焦点
和焦点）。从jQuery 1.4.1开始，可以指定
悬停事件（将
映射到mouseenter和mouseleave，其中，
依次映射到mouseover和
mouseout）。

In jQuery 1.3.x only the following JavaScript events (in addition to custom events) could be bound with .live(): click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, and mouseup. As of jQuery 1.4 the .live() method supports custom events as well as all JavaScript events that bubble. As of jQuery 1.4.1 even focus and blur work with live (mapping to the more appropriate, bubbling, events focusin and focusout). As of jQuery 1.4.1 the hover event can be specified (mapping to mouseenter and mouseleave, which, in turn, are mapped to mouseover and mouseout).

推荐答案

答案很简单。 scroll 是防止闪烁的原因，因为它会在调整大小的第一时刻触发。但是 scroll 对 live 无效（因为它没有冒泡），所以你新创建的textareas将被调整大小在 keyup 上，但它会在稍后触发（因此闪烁）。

The answer is simple. scroll is what prevents the flickering, because it fires at the very first moment of resize. But scroll has no effect with live (because it doesn't bubble), so your newly created textareas will be resized on keyup but it fires later (thus the flickering).

更新：当然，我甚至可以解决你的问题。你只需要问:) [演示]

Update: Of course I can even solve your problem. You just need to ask :) [Demo]

$('textarea.autoresize').live('keyup', function() {
    var el = $(this);
    if (!el.data("has-scroll")) {
        el.data("has-scroll", true);
        el.scroll(function(){
           resizeTextArea(el);
        });
    }
    resizeTextArea(el);
});

关键是，它混合了 live 结合。 keyup 事件，触发所有元素（因为 live ），添加唯一的有条件地滚动事件。

The point is, it mixes live with bind. The keyup event, which fires on all elements (because of live), adds the unique scroll event conditionally.

更新2 ：哦，顺便说一句，整个调整大小代码可以写得更好as：

Update 2: Oh, and by the way your whole resizing code can be better written as:

// resize text area (fixed version of Pointy's)
function resizeTextArea(elem) {
    elem.height(1); elem.scrollTop(0);
    elem.height(elem[0].scrollHeight - elem[0].clientHeight + elem.height())
}​

这篇关于如何绑定Live（）上的滚动事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！