Sự kiện "xuất hiện" trên JQuery

Question

Ứng dụng của tôi thêm một số phần tử vào DOM sau $ (tài liệu) đã được gọi. Tôi đang sử dụng jQuery 1.9.0

Ví dụ sau hoạt động.

$(document).on("click", "#box-descr", function(evt) { 
    console.log("I showed up"); 
}); 

Tuy nhiên, tôi muốn thực hiện chức năng đó khi phần tử xuất hiện trên màn hình. Tôi không thể thấy bất kỳ sự kiện nào cho mục đích này tại đây http://api.jquery.com/category/events/

Về cơ bản nó là một ứng dụng đơn, vì vậy tài liệu sẵn sàng chỉ được gọi một lần nhưng các phần tử ra vào màn hình khi người dùng tương tác với giao diện người dùng.

Answer 1

Có thể bạn muốn .ready() chức năng:

$("#box-descr").ready(function(){ 
    console.log("I showed up"); 
}); 

hoặc nếu bạn đang mờ dần nó trong:

$("#box-descr").fadeIn(1000, function(){ 
    console.log("I showed up"); 
}); 

---

Cập nhật: Như @ Jeff Tian 's comment-

Bạn cần ủy quyền sự kiện cho pa tĩnh gần nhất thuê hoặc cho document như thế này:

$(document).on("ready", "#box-descr", function(){ 
    console.log("I showed up"); 
}); 

Answer 2

Tôi nghĩ rằng bạn đang yêu cầu nếu bạn có thể kích hoạt sự kiện khi các yếu tố nhắm mục tiêu sẽ được thêm vào DOM. Hãy cho tôi biết nếu đây không phải là những gì bạn muốn.

$(document).on('click', '#box-descr', function(evt) { 
    console.log("I showed up"); 
}); 

// Later in your code you add the element to the DOM 
$('<div />', { id : 'box-descr' }).appendTo('body'); 

// Then trigger the click event for the added element 
$('#box-descr').trigger('click'); 

Hy vọng rằng sẽ là những gì bạn đang tìm kiếm

Bạn có thể rút ngắn này để

$('<div />', { id : 'box-descr' }).appendTo('body').trigger('click'); 

Answer 3

Sự kiện có thể đẹp, nhưng vì không có sự kiện tự nhiên với sự xuất hiện, sự kiện đòi hỏi phải biết khi nào một mục được thêm vào để sự kiện có thể được kích hoạt theo cách thủ công. Bạn có thể sử dụng bỏ phiếu để kiểm tra sự xuất hiện của một cái gì đó và thực hiện một hành động khi nó xuất hiện. Điều này phù hợp với nội dung được thêm ngoài tầm kiểm soát của bạn, chẳng hạn như từ đầu vào của người dùng, ajax hoặc các chương trình khác.

setInterval(function() { 
    $('.my-element-class:not(.appeared)') 
     .addClass('appeared') 
     .each(function() { 
      console.log("here I am!") 
     }); 
}, 250); 

Điều này sẽ kiểm tra sự xuất hiện của một phần tử theo tên lớp (hoặc bất kỳ tiêu chí chọn khác nào bạn cung cấp) 4 lần mỗi giây và chạy mã khi mục mới xuất hiện. Một khi một mục được nhìn thấy lớp .appeared được thêm vào để ngăn chặn trường hợp đó được phát hiện một lần nữa. Nếu bạn chỉ muốn thử nghiệm một lần, bạn có thể đơn giản hóa và đóng cửa bỏ phiếu sau khi phát hiện.

var testAppearTmr = setInterval(function() { 
    if ($('.my-element-class').length) { 
     clearInterval(testAppearTmr); 
     console.log("here I am!") 
    } 
}, 250); 

Các jQuery appear plugin được xây dựng xung quanh những kỹ thuật này và có rất nhiều lựa chọn, như các bài kiểm tra vì nếu mục nằm trong khu vực xem, nhưng nếu tất cả các bạn muốn làm là thử nghiệm cho một vài mặt hàng được bổ sung cho dom mã trên là nhiều tiết kiệm hơn một plugin.