How to bind a scroll event in Live ()?

Question

Some time ago, I solved a problem for someone who wanted his text ad to grow . I executed a function that listens for scroll events and keyup areas and recounts the number of rows. I wanted to use the code in another project, but there is a problem. The text field is not known. To solve this problem, I use live instead of bind , so the future area will also be connected.

Now I find that live is much slower than bind . I created a simplified jsFiddle example . The top textarea behaves the way I want, but the new ones added flicker due to late signaling (I use Chrome).

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

I look forward to your ideas.

EDIT: Changed the link to the code. Removed scrollingCode. Added one more button to create another text field. The problem is with scrolling. It does not work.

Clarification: I do not know which function will create the text area. I see flickering dynamically added mailboxes in Chrome .

For future readers:

In jQuery 1.3.x, only the following JavaScript events are used (in addition to custom events) that can be associated with .live (): click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, and mouseup . As jQuery 1.4, the .live () method supports custom events, as well as all JavaScript events that bubble up. Starting with jQuery 1.4.1, it even focuses and blurs the work with the living (matching with a more suitable, bubbling, focusin event and focus). Starting with jQuery 1.4.1, a hover event can be specified (matching to mouse and mouse, which, in turn, are matching to mouseover and MouseOut).

Answer 1

The answer is simple. scroll is what prevents flickering because it fires at the very first moment of resizing. But scroll does not affect live (because it does not bubble), so your newly created text areas will be changed to keyup , but later it fires (thus 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 fact is that he mixes live with bind . The keyup event, which fires for all elements (due to live ), adds a unique scroll event conditionally.

Update 2 : Oh, and by the way, all the 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 rechecks the event using a dynamically generated identifier. Not as elegant as the karim79 solution, but it works.

Answer 3

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

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

Hope this helps. Briefly and clearly.

Answer 4

I found a solution to this problem: the problem is that .live and scroll are not working.

My solution is to use the bind .. and Timeout event. A timeout will give the DOM time to update, for example.

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