Làm thế nào để viết sự kiện onshow bằng cách sử dụng javascript/jquery?

Question

Tôi có một thẻ neo trên trang của mình, tôi muốn một sự kiện được gắn vào nó, nó sẽ kích hoạt khi hiển thị phần tử này thay đổi.

Tôi có thể viết sự kiện này bằng cách nào? và nắm bắt bất cứ khi nào hiển thị yếu tố này thay đổi?

Answer 1

Bạn không thể trực tiếp nhận được sự kiện trực tiếp bằng JavaScript. Hãy nhớ rằng các phương pháp sau đây là phi tiêu chuẩn.

TRÊN IE bạn có thể sử dụng

onpropertychange event

cháy sau khi tài sản của một phần tử thay đổi

và cho Mozilla

bạn có thể sử dụng

watch

Đồng hồ cho một tài sản được giao một giá trị và điều hành một chức năng khi điều đó xảy ra .

Answer 2

Đây là cách tôi thực hiện trên onShow, như một plugin jQuery. Nó có thể hoặc có thể không thực hiện chính xác những gì bạn đang làm, tuy nhiên.

(function($){ 
    $.fn.extend({ 
    onShow: function(callback, unbind){ 
     return this.each(function(){ 
     var _this = this; 
     var bindopt = (unbind==undefined)?true:unbind; 
     if($.isFunction(callback)){ 
      if($(_this).is(':hidden')){ 
      var checkVis = function(){ 
       if($(_this).is(':visible')){ 
       callback.call(_this); 
       if(bindopt){ 
        $('body').unbind('click keyup keydown', checkVis); 
       } 
       }       
      } 
      $('body').bind('click keyup keydown', checkVis); 
      } 
      else{ 
      callback.call(_this); 
      } 
     } 
     }); 
    } 
    }); 
})(jQuery); 

Bạn có thể gọi hàm này bên trong hàm $ (document) .ready() và sử dụng gọi lại để kích hoạt khi phần tử được hiển thị, như vậy.

$(document).ready(function(){ 
    $('#myelement').onShow(function(){ 
    alert('this element is now shown'); 
    }); 
}); 

Nó hoạt động bằng cách gắn một nhấp chuột, KeyUp, và sự kiện KeyDown cho cơ thể để kiểm tra xem phần tử được hiển thị, vì những sự kiện này có nhiều khả năng gây ra một yếu tố để được hiển thị và rất thường xuyên được thực hiện bởi người dùng. Điều này có thể không cực kỳ thanh lịch nhưng hoàn thành công việc. Ngoài ra, khi phần tử được hiển thị, các sự kiện này không bị chặn khỏi cơ thể để không tiếp tục kích hoạt và làm chậm hiệu suất.

Answer 3

Bạn cũng có thể ghi đè phương pháp chương trình mặc định của jQuery:

var orgShow = $.fn.show; 
$.fn.show = function() 
{ 
    $(this).trigger('myOnShowEvent'); 
    orgShow.apply(this, arguments); 
    return this; 
} 

Bây giờ chỉ cần gắn mã của bạn để sự kiện:

$('#foo').bind("myOnShowEvent", function() 
{ 
    console.log("SHOWN!") 
}); 

Answer 4

Mã từ liên kết này làm việc cho tôi: http://viralpatel.net/blogs/jquery-trigger-custom-event-show-hide-element/

(function ($) { 
    $.each(['show', 'hide'], function (i, ev) { 
    var el = $.fn[ev]; 
    $.fn[ev] = function() { 
     this.trigger(ev); 
     return el.apply(this, arguments); 
    }; 
    }); 
})(jQuery); 

$('#foo').on('show', function() { 
     console.log('#foo is now visible'); 
}); 

$('#foo').on('hide', function() { 
     console.log('#foo is hidden'); 
}); 

Tuy nhiên, chức năng gọi lại được gọi trước và sau đó phần tử là sho wn/ẩn. Vì vậy, nếu bạn có một số hoạt động liên quan đến cùng một bộ chọn và nó cần phải được thực hiện sau khi được hiển thị hoặc ẩn, sửa chữa tạm thời là thêm một thời gian chờ cho vài mili giây.