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

Question

不久前，我为某人解决了一个问题 希望他的文本区域变大。我创建了一个函数来侦听该区域的 scroll 和 keyup 事件并重新计算行数。我想在另一个项目中使用该代码，但出现了问题。文本区域不知道为了解决这个问题，我使用 live 而不是 bind，这样将来的区域也将被绑定。

现在我发现 live 的执行速度比 bind 慢很多。我创建了 jsFiddle 上的简化示例。上面的文本区域的行为符合我的要求，但由于信号延迟（我使用的是 Chrome），新添加的文本区域会闪烁。

如何使live与bind一样快？问题在于scroll< /code> 不能与 live 语句一起使用。 有没有办法为live启用scroll？是否有一个jQuery事件通知我已经添加了一个新的TextArea，所以我可以使用绑定在新创建的元素上添加 scroll 吗？

我期待您的想法。

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

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

对于未来的读者：

在 jQuery 1.3.x 中只有以下内容 JavaScript 事件（除了 自定义事件）可以绑定 .live(): 单击、dblclick、keydown、 按键、键盘向上、鼠标按下、鼠标移动、 mouseout、mouseover 和 mouseup。作为 jQuery 1.4 的 .live() 方法 支持自定义事件以及所有 冒泡的 JavaScript 事件。截至 jQuery 1.4.1 甚至可以进行焦点和模糊工作 与现场（映射到更多 适当的、冒泡的、事件集中的 和对焦）。从 jQuery 1.4.1 开始 可以指定悬停事件（映射 mouseenter 和 mouseleave，其中， 依次映射到鼠标悬停和 鼠标移开）。

Answer 1

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

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

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

Answer 2

试试这个 (JSFiddle)：

$('#Add').click(function(){
    var id = "newtextarea"+Math.floor(Math.random()*1000);
   $('#pane').append($('<textarea class="new" rows="1" cols="40" id="'+id+'"></textarea><br/>'));
    $('textarea:last').focus();
    bindAgain(id);
});

//inital resize
resizeTextArea($('#tst'));

//'live' event
$('textarea.new').bind('keyup scroll', function() {
    resizeTextArea($(this));
});

function bindAgain(id)
{
    $('#'+id).bind('keyup scroll', function() {
    resizeTextArea($(this));
});

}

基本上，它使用动态创建的 ID 重新绑定事件。虽然不像 karim79 的解决方案那么优雅，但它确实有效。

Answer 3

我将它绑定到一个自定义事件，每当重要的事情发生时我都会调用该事件。像这样：

$(body).live('MyCustomEvent', function() {
    $("#MyScrollItem").scroll(function() {
       // Do things here
    }
});

希望有帮助。简短而甜蜜。

Answer 4

我找到了这个问题的解决方案：问题是 .live 和滚动不起作用。

我的解决方案是使用绑定事件..和超时。超时会给 DOM 时间来更新，例如。

下面的代码用于在滚动到页面底部时加载内容。看一下 setTimeout 和绑定。

$('.list').bind("scroll",function(){
    $('.list').height()));
    if($('.list').scrollTop() >= ($('.list').height()+ $(window).height())){        
      setTimeout(function(){    //Time out is used as there is a possibility that
        last_function();
      },200);   
    }
});