javascript - 如何在 Live() 上绑定(bind)滚动事件？

Question

前一段时间我为一个人解决了一个问题 wanted his textarea to grow .我做了一个函数来监听该区域的 scroll 和 keyup 事件并重新计算行数。我想在另一个项目中使用代码，但是有问题。文本区域未知 为了解决这个问题，我使用 live 而不是 bind，这样 future 的区域也将被绑定(bind)。

现在我发现 live 的执行速度比 bind 慢很多。我创建了 a simplified example on jsFiddle .上部文本区域的行为符合我的要求，但由于信号较晚(我使用的是 Chrome)，新添加的文本区域会闪烁。

如何让 live 和 bind 一样快？ 问题是 scroll 不能与 live 语句一起使用。 有没有办法为 live 启用scroll？ 是否有一个 jQuery 事件向我发出信号，表明新的 TextArea 已被添加，所以我可以使用绑定(bind)在新创建的元素上添加滚动吗？

我期待着您的想法。

编辑:更改了代码链接。删除了滚动代码。添加了另一个按钮来创建不同的文本区域。问题与“滚动”有关。它不会触发。

澄清:我不知道什么函数会创建文本区域。我在 Chrome 中看到动态添加的框闪烁。

对于 future 的读者:

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).

Answer 1

答案很简单。 scroll 是防止闪烁的原因，因为它会在调整大小的第一刻触发。但是 scroll 对 live 没有影响(因为它不会冒泡)，所以你新创建的文本区域将在 keyup 上调整大小但它会触发后来(因此闪烁)。

更新:当然我什至可以解决你的问题。你只需要问 :) [ 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 和 bind。在所有元素上触发的 keyup 事件(因为 live)有条件地添加唯一的 scroll 事件。

更新 2:哦，顺便说一下，您的整个调整大小代码可以更好地编写为:

// 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())
}​