Как связать событие прокрутки в Live ()?

Question

Некоторое время назад я решил проблему для кого-то, чтобы хотел, чтобы его текстовая область выросла . Я сделал функцию, которая слушает события scroll и keyup области и пересчитывает количество строк. Я хотел использовать код в другом проекте, но есть проблема. Текстовые области не известны. Чтобы решить эту проблему, я использую live вместо bind, так что будущие области также будут связаны.

Теперь я обнаружил, что live выполняется намного медленнее, чем bind. Я создал упрощенный пример для jsFiddle . Верхняя текстовая область ведет себя так, как я хочу, но вновь добавленные из них мерцают из-за поздней передачи сигналов (я использую Chrome).

Как мне сделать live таким же быстрым, как bind? Проблема в том, что scroll нельзя использовать с оператором live , Есть ли способ включить scroll для live? Может быть, есть событие jQuery, которое сигнализирует мне о добавлении новой TextArea, поэтому я могу использовать привязку для добавления scroll в вновь созданный элемент?

Я с нетерпением жду ваших идей.

РЕДАКТИРОВАТЬ: Изменена ссылка на код. Убран код прокрутки. Добавлена ​​еще одна кнопка для создания другой текстовой области. Проблема связана с «прокруткой». Не стреляет.

Уточнение: Я не буду знать, какая функция создаст текстовую область. Я вижу мерцание динамически добавляемых полей в 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 событие hover может быть указано (отображение к мышиному центру и отпуску мышью, которые, в свою очередь, отображаются при наведении мыши и MouseOut).

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

}

По сути, он связывает событие, используя динамически созданный идентификатор. Не так элегантно, как решение karim79, но оно работает.

Answer 3

Я нашел решение этой проблемы: проблема в том, что .live и scroll не работают.

Мое решение - использовать событие bind .. и Timeout.Тайм-аут даст 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);   
    }
});

Answer 4

Я связываю это с пользовательским событием, которое я вызываю всякий раз, когда происходит что-то важное.Вот так:

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

Надеюсь, это поможет.Коротко и сладко.