Как написать onshow событие с помощью javascript/jquery?

Ответ 1

Вы не можете получить событие onshow непосредственно в JavaScript. Помните, что следующие методы нестандартные.

В IE вы можете использовать

событие onpropertychange

Пожары после свойства элемента изменения

и для Mozilla

вы можете использовать

смотреть

Часы для назначения объекта значение и выполняет функцию, когда это имеет место.

Ответ 2

Это мой способ сделать onShow, как плагин jQuery. Однако он может или не может выполнять точно то, что вы делаете.

(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);

Вы можете вызвать это внутри функции $(document).ready() и использовать обратный вызов для запуска, когда элемент отображается, как это.

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

Он работает, привязывая событие click, keyup и keydown к телу, чтобы проверить, показан ли этот элемент, поскольку эти события, скорее всего, заставят элемент отображаться и очень часто выполняются пользователем. Это может быть не очень элегантно, но выполняет свою работу. Кроме того, как только элемент отображается, эти события не привязаны к корпусу, чтобы не продолжать стрелять и замедлять работу.

Ответ 3

Вы также можете переопределить метод отображения по умолчанию jQuery:

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

Теперь просто привяжите свой код к событию:

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

Ответ 4

Код из этой ссылки работал у меня: 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');
});

Однако функция обратного вызова сначала вызывается, а затем элемент отображается/скрыт. Поэтому, если у вас есть операция, связанная с одним и тем же селектором, и это нужно сделать после показа или скрытия, временное исправление заключается в добавлении тайм-аута в течение нескольких миллисекунд.