jQueryで表示可能なDivのイベントをトリガーするにはどうすればよいですか?

jQuery を使用して可視 div のイベントをトリガーする

jQuery では、「isvisible」イベント ハンドラーをアタッチして、div 要素の可視性を監視し、特定のアクションをトリガーできます。

提供された疑似コードは次のように実装できます:

<code class="js">$(function () {
  $('#contentDiv').on('isVisible', function () {
    alert("do something");
  });
});</code>

このコードは、div が表示されたときにアラート関数を実行するイベント ハンドラーを #contentDiv div に割り当てます。 .

jQuery 拡張アプローチ:

または、.show() メソッドを拡張して、div が表示される前後にイベントをトリガーすることもできます:

拡張子:

<code class="js">jQuery(function ($) {
  var _oldShow = $.fn.show;

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

      obj.trigger('beforeShow');
      _oldShow.apply(obj, [speed, newCallback]);
    });
  };
});</code>

使用法:

<code class="js">$('#test')
  .on('beforeShow', function () {
    alert('beforeShow');
  })
  .on('afterShow', function () {
    alert('afterShow');
  })
  .show(1000, function () {
    alert('in show callback');
  })
  .show();</code>

このアプローチを使用すると、div が表示される前後にイベントをトリガーできます。元の .show() メソッドの動作を維持しながら。

以上がjQueryで表示可能なDivのイベントをトリガーするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。