Cách liên kết sự kiện cuộn trên Live()?

Question

Một thời gian trước, tôi đã giải quyết vấn đề cho ai đó rằng wanted his textarea to grow. Tôi đã thực hiện một chức năng nghe các sự kiện scroll và keyup của khu vực và tính toán lại số hàng. Tôi muốn sử dụng mã trong một dự án khác, nhưng có một vấn đề. Các textarea của không biết Để giải quyết điều này, tôi đang sử dụng live thay vì bind, do đó khu vực trong tương lai sẽ bị ràng buộc là tốt.

Bây giờ, tôi thấy rằng live thực hiện chậm hơn rất nhiều so với bind. Tôi đã tạo a simplified example on jsFiddle. Các văn bản trên hành vi như tôi muốn, nhưng những người mới được thêm nhấp nháy do tín hiệu muộn (tôi đang sử dụng Chrome).

Làm cách nào để tạo live nhanh như bind? Vấn đề là không thể sử dụng scroll bằng tuyên bố live. Có cách nào để bật scroll cho live không? Có thể có sự kiện jQuery báo hiệu cho tôi rằng một TextArea mới đã được thêm vào, vì vậy tôi có thể sử dụng một liên kết để thêm scroll vào phần tử mới được tạo ra không?

Tôi đang mong chờ ý tưởng của bạn.

EDIT: Đã thay đổi liên kết thành mã. Đã xóa mã cuộn. Thêm một nút khác để tạo một vùng văn bản khác. Vấn đề phải làm với 'cuộn'. Nó không cháy.

Làm rõ: Tôi sẽ không biết chức năng nào sẽ tạo ra vùng văn bản. Tôi thấy nhấp nháy trên các hộp được thêm động trong Chrome.

Đối với độc giả trong tương lai:

Trong jQuery 1.3.x chỉ sau Javascript sự kiện (ngoài sự kiện tùy chỉnh) có thể bị ràng buộc với .live(): click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, and mouseup. của jQuery 1.4. Kể từ jQuery 1.4.1 thậm chí lấy nét và làm mờ làm việc bằng trực tiếp (ánh xạ tới nhiều hơn thích hợp, sủi bọt, các sự kiện tập trung và lấy nét). Kể từ jQuery 1.4.1, sự kiện di chuột có thể được chỉ định (ánh xạ đến con trỏ chuột và chuột con, trong đó, lần lượt, được ánh xạ tới di chuột và mouseout).

Answer 1

Câu trả lời rất đơn giản. scroll là những gì ngăn chặn nhấp nháy, bởi vì nó bắn ngay tại thời điểm đầu tiên của thay đổi kích cỡ. Nhưng scroll không có hiệu lực với live (bởi vì nó không bong bóng), do đó, văn bản mới được tạo của bạn sẽ được thay đổi kích thước trên keyup nhưng nó cháy sau đó (do đó nhấp nháy).

Cập nhật: Tất nhiên tôi thậm chí có thể giải quyết được sự cố của bạn. Bạn chỉ cần phải hỏi :) [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); 
}); 

Vấn đề là, nó pha trộn live với bind. Sự kiện keyup, kích hoạt trên tất cả các phần tử (vì live), thêm sự kiện scroll duy nhất có điều kiện.

Cập nhật 2: Oh, và bằng cách này toàn bộ mã thay đổi kích thước của bạn có thể được viết tốt hơn như:

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

} 

Về cơ bản, nó rebinds trường hợp sử dụng một ID tự động tạo ra. Không thanh lịch như giải pháp của karim79, nhưng nó hoạt động.

Answer 3

tôi gắn nó vào một sự kiện tùy chỉnh mà tôi gọi là bất cứ khi nào một cái gì đó quan trọng xảy ra. Như thế này:

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

Hy vọng điều đó sẽ hữu ích. Ngắn và ngọt.

Answer 4

Tôi tìm thấy giải pháp cho vấn đề này: Vấn đề là nơi .live và cuộn không hoạt động.

Giải pháp của tôi là sử dụng sự kiện liên kết .. và Hết thời gian chờ. Thời gian chờ sẽ cho thời gian DOM cập nhật ví dụ.

Mã bên dưới được sử dụng để tải nội dung khi bạn cuộn xuống cuối trang. Hãy xem setTimeout và 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); 
    } 
});