Jak powiązać zdarzenie przewijania na żywo()?

Question

Jakiś czas temu rozwiązałem problem dla kogoś, kto jest wanted his textarea to grow. Zrobiłem funkcję, która nasłuchuje zdarzeń w obszarze i ponownie oblicza liczbę wierszy. Chciałem użyć kodu w innym projekcie, ale jest problem. The textarea nie są znane Aby rozwiązać ten problem, używam live zamiast bind, aby przyszłe obszary również były powiązane.

Teraz stwierdzam, że live wykonuje dużo wolniej niż bind. Stworzyłem a simplified example on jsFiddle. Górny tekst zachowuje się tak, jak chcę, ale nowo dodane migają ze względu na późną sygnalizację (używam Chrome).

Jak ustawić live tak szybko, jak bind? Problem polega na tym, że scroll nie można używać z instrukcją live. Czy istnieje sposób włączenia scroll dla live? Czy jest możliwe zdarzenie jQuery, które sygnalizuje mi, że dodano nową usługę TextArea, więc mogę użyć wiązania, aby dodać scroll do nowo utworzonego elementu?

Nie mogę się doczekać waszych pomysłów.

EDIT: Zmieniono link do kodu. Usunięto scrollingCode. Dodano inny przycisk, aby utworzyć inne pole tekstowe. Problem dotyczy "przewijania". Nie strzela.

Wyjaśnienie: Nie wiem, jaką funkcję stworzą textarea. Widzę migotanie na dynamicznie dodawanych skrzynkach w Chrome.

Dla przyszłych czytelników:

w jQuery 1.3.x tylko następujące JavaScript wydarzenia (oprócz niestandardowych zdarzeń) może być związany z .live(): click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, and mouseup. Jako z jQuery 1.4 metoda .live() obsługuje zdarzenia niestandardowe, a także wszystkie zdarzenia JavaScript z bąbelkami. Począwszy od jQuery 1.4.1 nawet ostrość i rozmycie działają z live (mapowanie na więcej odpowiednie, bulgotanie, wydarzenia focusin i focusout). Od jQuery 1.4.1 można określić zdarzenie na hover (odwzorowanie na mouseenter i mouseleave, które z kolei, , są odwzorowane na mouseover i ).

Answer 1

Odpowiedź jest prosta. scroll jest tym, co zapobiega migotaniu, ponieważ uruchamia się w momencie pierwszej zmiany rozmiaru. Ale nie ma wpływu na live (ponieważ nie bańka), więc twoje nowo utworzone obszary tekstowe zostaną przeskalowane na keyup, ale odpalą później (a więc migotanie).

Aktualizacja: Oczywiście, mogę nawet rozwiązać twój problem. Wystarczy zapytać :) [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); 
}); 

Chodzi o to, że miesza live z bind. Zdarzenie keyup, które uruchamia wszystkie elementy (z powodu live), warunkuje wyjątkowe zdarzenie scroll.

Aktualizacja 2: Oh, a przy okazji cały kod skalowanie może być lepiej zapisać jako:

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

} 

Zasadniczo, to ponowne powiązanie zdarzenie przy użyciu dynamicznie utworzony identyfikator. Nie tak eleganckie jak rozwiązanie karim79, ale działa.

Answer 3

wiążę go do niestandardowego wydarzenia, które nazywam gdy wydarzy się coś ważnego. W ten sposób:

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

Nadzieję, że pomaga. Krótkie i słodkie.

Answer 4

Znalazłem rozwiązanie tego problemu: Problem polega na tym, gdzie .live i scroll nie działa.

Moje rozwiązanie polega na użyciu zdarzenia wiążącego .. i limitu czasu. Limit czasu daje czas DOM na aktualizację, np.

Poniższy kod służy do ładowania zawartości po przewinięciu do dolnej części strony. Spójrz na setTimeout i 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); 
    } 
});