Sự cố với qTip - Mẹo không hiển thị vì các phần tử tải sau tập lệnh

Question

Tôi không có nhiều kinh nghiệm với javascript, jQuery hoặc plugin của nó nhưng thường tôi quản lý. Dù sao, khách hàng của tôi đang xây dựng một trang web và một trong những mục đích của nó là nhận các bài báo từ các trang web khác nhau và hiển thị các tiêu đề trong danh sách html không theo thứ tự. Tôi không có quyền truy cập vào mã của anh ấy, các bài viết tin tức tải lên khá chậm (nhiều sau khi trang web đã tải).

Tôi đang sử dụng qTIP và ý tưởng là khi bạn di chuột qua tiêu đề tin tức, nó sẽ tạo ra một chú giải công cụ. Điều này làm việc tốt trong môi trường dev của tôi, bởi vì tôi có tiêu đề giả mà không được tạo ra từ bất cứ đâu.

Vấn đề là khi khách hàng đặt trang web trong môi trường thử nghiệm của mình, tập lệnh tải tiêu đề tin tức vào danh sách quá chậm, tập lệnh qTIP tải trước khi có bất kỳ yếu tố nào trong danh sách. Do đó nó không nhận thức được bất kỳ của <li> 's để chọn và tạo ra tooltips từ.

Có cách nào đảm bảo rằng TẤT CẢ các bài viết tin tức được tải trước tập lệnh chú thích không? Tôi nghĩ rằng một sự chậm trễ đơn giản trong việc tải kịch bản không phải là rất thông minh bởi vì một số tiêu đề dường như mất nhiều thời gian để tải hơn những người khác, vì vậy sự chậm trễ sẽ phải khá dài.

Answer 1

Bạn nên sử dụng Sự kiện trực tiếp của khung công tác jQuery.

Binds a handler to an event (like click) for all current - and future - matched element. Can also bind custom events.

ví dụ như vậy bạn có thể làm một cái gì đó giống như

$("li").live('mouseover', function(){ 
            $(this).qTip(...); 
            }); 

ref: http://docs.jquery.com/Events/live

Answer 2

Xem cập nhật của tôi ở cuối

Tôi đã làm việc về vấn đề này như tốt, và đã đưa ra một giải pháp tương tự như giải pháp được cung cấp bởi @Gaby. Vấn đề với giải pháp của @ Gaby là nó không tạo ra qTip cho đến khi sự kiện di chuột xảy ra. Điều này có nghĩa là bạn sẽ không nhìn thấy qTip trong lần đầu tiên bạn di chuột qua, nhưng sẽ là lần thứ hai. Ngoài ra, nó sẽ tạo lại qTip mỗi khi bạn di chuột qua, điều đó không hoàn toàn chính xác.

Các giải pháp tôi đã đi với là thế này:

$("li").live('mouseover', function() { 
    var target = $(this); 
    if (target.data('qtip')) { return false; } 
    target.qtip(...); 
    target.trigger('mouseover'); 
}); 

Dưới đây là những gì nó làm:

• Sets nhắm mục tiêu đến các yếu tố li
• Returns nếu đó yếu tố li đã có một qtip
• Nếu không có qtip trên li, sau đó áp dụng qtip cho nó
• Gửi kích hoạt di chuột một lần nữa để qtip là acti vated

Tôi biết đây là một chút hacky, nhưng có vẻ như nó hoạt động. Cũng lưu ý rằng tùy chọn 2.0 version of qTip should support live() là một tùy chọn. Theo như tôi có thể nói, các current 2.0 development branch chưa hỗ trợ nó.

UPDATE:

Đây là cách thích hợp để làm điều này, trực tiếp từ các nhà phát triển qtip mình trên các diễn đàn:

$('selector').live('mouseover', function() { 
    $(this).qtip({ 
     overwrite: false, // Make sure another tooltip can't overwrite this one without it being explicitly destroyed 
     content: 'I\'m a live qTip', // comma was missing here 
     show: { 
     ready: true // Needed to make it show on first mouseover event 
     } 
    }); 
}) 

Vì vậy, nó đầu tiên đảm bảo rằng bạn không tái qtips mới mọi di chuột với "ghi đè: sai". Sau đó, nó làm cho qtip hiển thị trên di chuột đầu tiên với "show: {ready: true}".

Answer 3

Vâng tôi đã nghĩ ra một thứ tương tự. Tôi nghĩ rằng ai đó đã đăng một bài tương tự trên diễn đàn của họ. Tôi đã thay đổi sự kiện di chuột để di chuột để qtip kích hoạt trên di chuột đầu tiên.

$('li').live('mousemove', function() { 
    if(!$(this).data('qtip')) { 
    $(this).qtip(...) 

Tôi cũng đồng ý rằng đây là giải pháp rất hack, tuy nhiên tôi không thể đưa ra giải pháp tốt hơn. Có lẽ việc kiểm tra và áp dụng qtip trong hàm gọi lại để lấp đầy li sẽ tốt hơn nhưng tôi không thực sự có quyền truy cập vào mã đó.

Answer 4

Không phải vì không có gì, nhưng tôi vừa thêm show:{ready:true} vào sự kiện onmouseover của mình. Điều đó khiến nó hoạt động trong Chrome & FF.