Gọi jQuery khi có chuyện xảy ra

Question

Vì vậy, tôi đang sử dụng jQuery Masonry và tôi muốn gọi một số jQuery mỗi khi nó tải bài viết:

function manipulate(id) { 
    $(id).each(function(){ 
    if($(this).height()>200){ 
     $('#container2').append(this); 
    } else{ 
     $('#container').append(this); 
    }; 
    }); 
}; 

Vì vậy, tôi muốn gọi chức năng này mỗi lần duy nhất mà các mục tiếp theo trong Tải container xây. Bằng cách này nó thao tác các mục theo cách chính xác. Làm thế nào để làm điều đó?

Cập nhật: Mô tả của Masonry

HTĐ chính là một Javascript cắm vào đó là như nổi CSS buộc phải phù hợp với di chuyển một cách hoàn hảo + vô hạn. Nó hoàn toàn ẩn tất cả mọi thứ mà sẽ không được trên trang 1 nếu không có cuộn vô hạn, và sau đó tải chúng khi cần thiết. Điều này có nghĩa rằng chức năng của tôi sẽ không ảnh hưởng đến bất kỳ mục ẩn nào và cần phải nhớ lại bất cứ khi nào Masonry tải bộ mục tiếp theo để chúng xuất hiện ở đúng vị trí. Điều này có thể có nghĩa là không biết Masonry, bạn không nhất thiết phải giải quyết vấn đề của mình, nhưng bạn vẫn có thể. Một kết thúc, Masonry "nối thêm" các mục vào thùng chứa Masonry, và sau đó "hiển thị" chúng. Vì vậy, tôi đoán những gì tôi cần làm là nối chúng vào các thùng chứa chính xác sau khi chúng đã được nối vào thùng chứa Masonry, nhưng trước khi nó được hiển thị.

đang Masonry:

$(window).load(function(){ 
    var $wall = $('#container'); 
    $wall.imagesLoaded(function(){ 
    $wall.masonry({ 
     itemSelector: '#entry, #entry_photo', 
     isAnimated : false 
    }); 
    }); 

    $wall.infinitescroll({ 
    navSelector : '#page-nav', 
    nextSelector : '#page-nav a', 
    itemSelector : '.entry, .entry_photo', 
    bufferPx  : 2000, 
    debug   : false, 
    errorCallback: function() { 
     $('#infscr-loading').fadeOut('normal'); 
    }}, 
    function(newElements) { 
     var $newElems = $(newElements); 
     $newElems.hide(); 
     $newElems.imagesLoaded(function(){ 
     $wall.masonry('appended', $newElems,{isAnimated: false}, function(){$newElems.fadeIn('slow');}); 
     }); 
    }); $('.entry').show(500); 
    }); 

Tôi đã thử đặt các chức năng trong các khối Masonry và ngay cả khi $newElems chức năng để xem nếu nó sẽ làm việc khi có nhiều hình ảnh tải, nhưng nó không, và trong thực tế phần nào phá vỡ nó.

Làm cách nào để chạy tất cả các phần tử mới được tải bởi Masonry thông qua jQuery của tôi để chúng được nối vào đúng vùng chứa?

Answer 1

Vì vậy, sử dụng mọi thứ đã nói trên các câu trả lời được cung cấp, tôi đã làm rối tung và khám phá cách nó được thực hiện ... do đó, 'appended' một phần trong imagesLoaded chỉ cần thay thế bằng chức năng! Nó được thực sự là một câu trả lời đơn giản ... Tôi chỉ phải thay thế này:

$wall.masonry('appended', $newElems,{isAnimated: false}, 
function(){$newElems.fadeIn('slow');}); 

với điều này:

$wall.masonry(manipulate($newElems) ,{isAnimated: false}, 
function(){$newElems.fadeIn('slow');}); 

Vấn đề giải quyết!

Answer 2

Một ý tưởng khác là liên kết hành động với jQuery .on() (http://api.jquery.com/on/). on() liên kết với các phần tử tương lai, giả sử chúng được gắn vào DOM một cách chính xác (ví dụ thông qua .append()). Vì vậy, ví dụ bạn có thể ràng buộc các sự kiện .click(), trên các phần tử chưa được tạo ra.

Cuối cùng, bạn có thể thực hiện một mẹo nhỏ gọn và thực hiện. append() kích hoạt sự kiện. Sau đó đính kèm một trình xử lý cho sự kiện đó vào thùng chứa lớn nơi mọi thứ được nối thêm, do đó, một hàm được gọi tự động. Dưới đây là ví dụ điển hình về số on append() do something và jsfiddle http://jsfiddle.net/rzRVu/

PS. trên một sidenote, tôi thấy bạn có chức năng như là một ID đầu vào, nhưng sau đó bạn gọi .each(). Mã trong mã html phải là duy nhất.

Cập nhật. Tôi đã bỏ lỡ rằng bạn đã cố gắng làm điều đó một cách chính xác thông qua xây, những gì phá vỡ chính xác? Tôi thấy bạn đang gọi .imagesLoaded() trên một biến jQuery, là một plugin?

Answer 3

Bạn chỉ khai báo một trường hợp Masonry cho container, container2 không có trường hợp Masonry, vì vậy nó không thể cuộn vô hạn bất cứ thứ gì. Ngoài ra, ($(this).height()>200) sẽ luôn là sai nếu hình ảnh chưa được tải, nó sẽ mặc định là undefined -> 0 > 200, điều này luôn sai. Bạn cần phải chờ cho hình ảnh tải trước khi đặt hoặc bằng cách nào đó lấy kích thước của hình ảnh khi nội dung đang được tải. Bạn có thể ẩn nó theo mặc định và đặt nó trong container, sau đó trên hình ảnh được tải, kiểm tra chiều cao và di chuyển nó vào vùng chứa thích hợp và hiển thị nó.