Sự kiện jQuery để kích hoạt hành động khi một div được hiển thị

Tôi đang sử dụng jQuery trong trang web của mình và tôi muốn kích hoạt một số hành động nhất định khi một div nhất định được hiển thị.

Có thể đính kèm một số loại xử lý sự kiện "isvisible" vào các div tùy ý và có mã nhất định chạy khi chúng được hiển thị không?

Tôi muốn một cái gì đó giống như mã giả sau đây:

$(function() {
  $('#contentDiv').isvisible(function() {
    alert("do something");
  });
});

Mã cảnh báo ("làm gì đó") không nên kích hoạt cho đến khi nội dungDiv thực sự hiển thị.

Cảm ơn.

Bạn luôn có thể thêm vào phương thức .show () ban đầu để bạn không phải kích hoạt các sự kiện mỗi khi bạn hiển thị thứ gì đó hoặc nếu bạn cần nó để làm việc với mã kế thừa:

Gia hạn Jquery:

jQuery(function($) {

  var _oldShow = $.fn.show;

  $.fn.show = function(speed, oldCallback) {
    return $(this).each(function() {
      var obj         = $(this),
          newCallback = function() {
            if ($.isFunction(oldCallback)) {
              oldCallback.apply(obj);
            }
            obj.trigger('afterShow');
          };

      // you can trigger a before show if you want
      obj.trigger('beforeShow');

      // now use the old function to show the element passing the new callback
      _oldShow.apply(obj, [speed, newCallback]);
    });
  }
});

Ví dụ sử dụng:

jQuery(function($) {
  $('#test')
    .bind('beforeShow', function() {
      alert('beforeShow');
    }) 
    .bind('afterShow', function() {
      alert('afterShow');
    })
    .show(1000, function() {
      alert('in show callback');
    })
    .show();
});

Điều này cho phép bạn thực hiện một cái gì đó trướcShow và afterShow trong khi vẫn thực hiện hành vi bình thường của phương thức .show () ban đầu.

^{Bạn cũng có thể tạo một phương thức khác để bạn không phải ghi đè phương thức .show () ban đầu.}

Vấn đề đang được giải quyết bởi các nhà quan sát đột biến DOM . Chúng cho phép bạn liên kết một người quan sát (một chức năng) với các sự kiện thay đổi nội dung, văn bản hoặc thuộc tính của các yếu tố dom.

Với việc phát hành IE11, tất cả các trình duyệt chính đều hỗ trợ tính năng này, hãy kiểm tra http://caniuse.com/mutingobserver

Mã ví dụ như sau:

$(function() {
  $('#show').click(function() {
    $('#testdiv').show();
  });

  var observer = new MutationObserver(function(mutations) {
    alert('Attributes changed!');
  });
  var target = document.querySelector('#testdiv');
  observer.observe(target, {
    attributes: true
  });

});

<div id="testdiv" style="display:none;">hidden</div>
<button id="show">Show hidden div</button>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

Không có sự kiện riêng nào bạn có thể tham gia vào việc này tuy nhiên bạn có thể kích hoạt một sự kiện từ tập lệnh của mình sau khi bạn đã hiển thị div bằng cách sử dụng. chức năng kích hoạt

ví dụ

//declare event to run when div is visible
function isVisible(){
   //do something

}

//hookup the event
$('#someDivId').bind('isVisible', isVisible);

//show div and trigger custom event in callback when div is visible
$('#someDivId').show('slow', function(){
    $(this).trigger('isVisible');
});

Bạn có thể sử dụng plugin Live Query của jQuery . Và viết mã như sau:

$('#contentDiv:visible').livequery(function() {
    alert("do something");
});

Sau đó, mỗi khi nội dungDiv hiển thị, "làm gì đó" sẽ được cảnh báo!

giải pháp của redsapes là câu trả lời đúng.

Nhưng là một giải pháp IN-THEORY, bạn có thể viết một hàm đang chọn các phần tử được phân loại theo .visibilityCheck( không phải tất cả các phần tử hiển thị ) và kiểm tra visibilitygiá trị thuộc tính của chúng ; nếu truesau đó làm một cái gì đó.

Sau đó, chức năng nên được thực hiện định kỳ bằng cách sử dụng setInterval()chức năng. Bạn có thể dừng bộ hẹn giờ bằng cách clearInterval()gọi thành công.

Đây là một ví dụ:

function foo() {
    $('.visibilityCheck').each(function() {
        if ($(this).is(':visible')){
            // do something
        }
    });
}

window.setInterval(foo, 100);

Bạn cũng có thể thực hiện một số cải tiến hiệu suất trên nó, tuy nhiên, giải pháp về cơ bản là vô lý khi được sử dụng trong thực tế. Vì thế...

Mã sau đây (được lấy từ http://maximeparmentier.com/2012/11/06/bind-show- leather-event-with-jquery / ) sẽ cho phép bạn sử dụng $('#someDiv').on('show', someFunc);.

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

Nếu bạn muốn kích hoạt sự kiện trên tất cả các yếu tố (và các yếu tố con) thực sự hiển thị, bằng $ .show, chuyển đổi, toggleClass, addClass hoặc removeClass:

$.each(["show", "toggle", "toggleClass", "addClass", "removeClass"], function(){
    var _oldFn = $.fn[this];
    $.fn[this] = function(){
        var hidden = this.find(":hidden").add(this.filter(":hidden"));
        var result = _oldFn.apply(this, arguments);
        hidden.filter(":visible").each(function(){
            $(this).triggerHandler("show"); //No bubbling
        });
        return result;
    }
});

Và bây giờ yếu tố của bạn:

$("#myLazyUl").bind("show", function(){
    alert(this);
});

Bạn có thể thêm ghi đè vào các hàm jQuery bổ sung bằng cách thêm chúng vào mảng ở trên cùng (như "attr")

một trình kích hoạt sự kiện ẩn / hiển thị dựa trên idennea của Glenns: đã loại bỏ chuyển đổi vì nó kích hoạt chương trình / ẩn và chúng tôi không muốn bắn 2 lần cho một sự kiện

$(function(){
    $.each(["show","hide", "toggleClass", "addClass", "removeClass"], function(){
        var _oldFn = $.fn[this];
        $.fn[this] = function(){
            var hidden = this.find(":hidden").add(this.filter(":hidden"));
            var visible = this.find(":visible").add(this.filter(":visible"));
            var result = _oldFn.apply(this, arguments);
            hidden.filter(":visible").each(function(){
                $(this).triggerHandler("show");
            });
            visible.filter(":hidden").each(function(){
                $(this).triggerHandler("hide");
            });
            return result;
        }
    });
});

Tôi đã có vấn đề tương tự và tạo ra một plugin jQuery để giải quyết nó cho trang web của chúng tôi.

https://github.com/shaunbowe/jquery.visibility Thay đổi

Đây là cách bạn sẽ sử dụng nó dựa trên ví dụ của bạn:

$('#contentDiv').visibilityChanged(function(element, visible) {
    alert("do something");
});

Sử dụng các điểm tham chiếu của jQuery:

$('#contentDiv').waypoint(function() {
   alert('do something');
});

Các ví dụ khác trên trang web của Waypoint jQuery .

Điều giúp tôi ở đây là polyfill spec ResizeObserver gần đây :

const divEl = $('#section60');

const ro = new ResizeObserver(() => {
    if (divEl.is(':visible')) {
        console.log("it's visible now!");
    }
});
ro.observe(divEl[0]);

Lưu ý rằng đó là crossbrowser và hiệu suất (không bỏ phiếu).

Tôi đã làm một hàm setinterval đơn giản để đạt được điều này. Nếu phần tử với lớp div1 hiển thị, nó đặt div2 hiển thị. Tôi biết không phải là một phương pháp tốt, nhưng một sửa chữa đơn giản.

setInterval(function(){
  if($('.div1').is(':visible')){
    $('.div2').show();
  }
  else {
    $('.div2').hide();
  }      
}, 100);

Bạn cũng có thể dùng thử jQuery xuất hiện plugin như được đề cập trong chuỗi song song https://stackoverflow.com/a35335028/741782

Điều này hỗ trợ nới lỏng và kích hoạt sự kiện sau khi hoạt hình được thực hiện! [đã thử nghiệm trên jQuery 2.2.4]

(function ($) {
    $.each(['show', 'hide', 'fadeOut', 'fadeIn'], function (i, ev) {
        var el = $.fn[ev];
        $.fn[ev] = function () {
            var result = el.apply(this, arguments);
            var _self=this;
            result.promise().done(function () {
                _self.triggerHandler(ev, [result]);
                //console.log(_self);
            });
            return result;
        };
    });
})(jQuery);

Lấy cảm hứng từ http://viruspatel.net/bloss/jquery-trigger-custom-event-show- leather-element /

Chỉ cần liên kết một trình kích hoạt với bộ chọn và đặt mã vào sự kiện kích hoạt:

jQuery(function() {
  jQuery("#contentDiv:hidden").show().trigger('show');

  jQuery('#contentDiv').on('show', function() {
    console.log('#contentDiv is now visible');
    // your code here
  });
});

Có một plugin jQuery có sẵn để xem sự thay đổi trong các thuộc tính DOM,

https://github.com/darcyclarke/jQuery-Watch-Plugin

Plugin kết thúc tốt đẹp Tất cả những gì bạn cần làm là liên kết MutingObserver

Sau đó, bạn có thể sử dụng nó để xem div bằng cách sử dụng:

$("#selector").watch('css', function() {
    console.log("Visibility: " + this.style.display == 'none'?'hidden':'shown'));
    //or any random events
});

Hy vọng điều này sẽ làm công việc theo cách đơn giản nhất:

$("#myID").on('show').trigger('displayShow');

$('#myID').off('displayShow').on('displayShow', function(e) {
    console.log('This event will be triggered when myID will be visible');
});

Tôi đã thay đổi trình kích hoạt ẩn / hiển thị từ Catalint dựa trên ý tưởng của Glenns. Vấn đề của tôi là tôi có một ứng dụng mô-đun. Tôi thay đổi giữa các mô-đun hiển thị và ẩn cha mẹ div. Sau đó, khi tôi ẩn một mô-đun và hiển thị một mô-đun khác, với phương thức của nó, tôi có độ trễ hiển thị khi tôi thay đổi giữa các mô-đun. Đôi khi tôi chỉ cần thắp sáng sự kiện này, và ở một số đứa trẻ đặc biệt. Vì vậy, tôi quyết định chỉ thông báo cho những đứa trẻ với lớp "displayObserver"

$.each(["show", "hide", "toggleClass", "addClass", "removeClass"], function () {
    var _oldFn = $.fn[this];
    $.fn[this] = function () {
        var hidden = this.find(".displayObserver:hidden").add(this.filter(":hidden"));
        var visible = this.find(".displayObserver:visible").add(this.filter(":visible"));
        var result = _oldFn.apply(this, arguments);
        hidden.filter(":visible").each(function () {
            $(this).triggerHandler("show");
        }); 
        visible.filter(":hidden").each(function () {
            $(this).triggerHandler("hide");
        });
        return result;
    }
});

Sau đó, khi một đứa trẻ muốn nghe sự kiện "hiển thị" hoặc "ẩn", tôi phải thêm cho nó lớp "displayObserver" và khi nó không muốn tiếp tục nghe nó, tôi sẽ loại bỏ nó

bindDisplayEvent: function () {
   $("#child1").addClass("displayObserver");
   $("#child1").off("show", this.onParentShow);
   $("#child1").on("show", this.onParentShow);
},

bindDisplayEvent: function () {
   $("#child1").removeClass("displayObserver");
   $("#child1").off("show", this.onParentShow);
},

Tôi muốn giúp đỡ

Một cách để làm điều này.
Chỉ hoạt động trên các thay đổi mức độ hiển thị được thực hiện bởi thay đổi lớp css, nhưng cũng có thể được mở rộng để theo dõi các thay đổi thuộc tính.

var observer = new MutationObserver(function(mutations) {
        var clone = $(mutations[0].target).clone();
        clone.removeClass();
                for(var i = 0; i < mutations.length; i++){
                    clone.addClass(mutations[i].oldValue);
        }
        $(document.body).append(clone);
        var cloneVisibility = $(clone).is(":visible");
        $(clone).remove();
        if (cloneVisibility != $(mutations[0].target).is(":visible")){
            var visibilityChangedEvent = document.createEvent('Event');
            visibilityChangedEvent.initEvent('visibilityChanged', true, true);
            mutations[0].target.dispatchEvent(visibilityChangedEvent);
        }
});

var targets = $('.ui-collapsible-content');
$.each(targets, function(i,target){
        target.addEventListener('visibilityChanged',VisbilityChanedEventHandler});
        target.addEventListener('DOMNodeRemovedFromDocument',VisbilityChanedEventHandler });
        observer.observe(target, { attributes: true, attributeFilter : ['class'], childList: false, attributeOldValue: true });
    });

function VisbilityChanedEventHandler(e){console.log('Kaboom babe'); console.log(e.target); }

giải pháp của tôi:

; (function ($) {
$.each([ "toggle", "show", "hide" ], function( i, name ) {
    var cssFn = $.fn[ name ];
    $.fn[ name ] = function( speed, easing, callback ) {
        if(speed == null || typeof speed === "boolean"){
            var ret=cssFn.apply( this, arguments )
            $.fn.triggerVisibleEvent.apply(this,arguments)
            return ret
        }else{
            var that=this
            var new_callback=function(){
                callback.call(this)
                $.fn.triggerVisibleEvent.apply(that,arguments)
            }
            var ret=this.animate( genFx( name, true ), speed, easing, new_callback )
            return ret
        }
    };
});

$.fn.triggerVisibleEvent=function(){
    this.each(function(){
        if($(this).is(':visible')){
            $(this).trigger('visible')
            $(this).find('[data-trigger-visible-event]').triggerVisibleEvent()
        }
    })
}
})(jQuery);

sử dụng ví dụ:

if(!$info_center.is(':visible')){
    $info_center.attr('data-trigger-visible-event','true').one('visible',processMoreLessButton)
}else{
    processMoreLessButton()
}

function processMoreLessButton(){
//some logic
}

$( window ).scroll(function(e,i) {
    win_top = $( window ).scrollTop();
    win_bottom = $( window ).height() + win_top;
    //console.log( win_top,win_bottom );
    $('.onvisible').each(function()
    {
        t = $(this).offset().top;
        b = t + $(this).height();
        if( t > win_top && b < win_bottom )
            alert("do something");
    });
});

<div id="welcometo">Özhan</div>
<input type="button" name="ooo" 
       onclick="JavaScript:
                    if(document.all.welcometo.style.display=='none') {
                        document.all.welcometo.style.display='';
                    } else {
                        document.all.welcometo.style.display='none';
                    }">

Mã này kiểm soát tự động không yêu cầu truy vấn có thể nhìn thấy hoặc kiểm soát không mong muốn