How bind the scroll event on a Live()?

Question

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.

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

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?

I'm looking forward to your ideas.

EDIT: 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.

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

For future readers:

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

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);
});

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.

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

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));
});

}

Basically, it rebinds the event using a dynamically created ID. Not as elegant as karim79's solution, but it works.

Answer 3

I bind it to a custom event that I call whenever something important happens. Like this:

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

Hope that helps. Short and sweet.

Answer 4

I found a solution to this problem: The problem is where .live and scroll doesnt work.

My solution is to use the bind event.. and Timeout. The timeout will give the DOM time to update eg.

The below code is used to load content when you scroll to the bottom of the page. Take a look at the setTimeout and the 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);   
    }
});