Question

前一段时间我为wanted his textarea to grow的某个人解决了一个问题。我已经创建了一个函数来侦听该区域的scroll和keyup事件，并重新计算行数。我想在另一个项目中使用代码，但是有一个问题。 textarea不知道为了解决这个问题，我使用的是live而不是bind，因此未来的区域也会被绑定。

现在我发现live执行速度比bind慢很多。我创建了a simplified example on jsFiddle。上面的textarea表现得像我想要的那样，但由于后期信令（我使用的是Chrome），新添加的文本会闪烁。

~~如何使live与bind一样快？~~ 问题是scroll不能与live语句一起使用。 有没有办法为scroll启用live？是否可能有一个jQuery事件告诉我已添加新的TextArea，因此我可以使用绑定添加新创建的元素上的scroll？

我期待着你的想法。

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

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

对于未来的读者：

在jQuery 1.3.x中仅有以下内容 JavaScript事件（除了自定义事件）可以绑定 .live（）：click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, and mouseup。如 jQuery 1.4的.live（）方法支持自定义事件以及所有事件泡泡的JavaScript事件。作为 jQuery 1.4.1甚至可以集中精力和模糊工作实时（映射到更多适当的，冒泡的，事件焦点和焦点）。截至jQuery 1.4.1 可以指定悬停事件（映射到mouseenter和mouseleave，其中，反过来，映射到mouseover和鼠标移开）。

Answer 1

答案很简单。 scroll是防止闪烁的原因，因为它会在调整大小的第一时刻触发。但scroll对live无效（因为它不会冒泡），因此您新创建的textareas将在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())
}

Answer 2

Try this (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和scroll不起作用。

我的解决方案是使用bind事件..和Timeout。超时将给DOM更新时间，例如。

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

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

如何绑定Live（）上的滚动事件？

4 个答案: