jQuery 事件，用于在 div 可见时触发操作

javascript jquery

2022-08-29 23:43:27

我在我的网站上使用jQuery，我想在某个div可见时触发某些操作。

是否可以将某种“可视”事件处理程序附加到任意 div，并在 div 可见时运行某些代码？

我想要类似下面的伪代码：

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

在内容Div实际可见之前，不应触发警报（“执行某些操作”）代码。

谢谢。

答案 1

您始终可以添加到原始的 .show（）方法中，这样就不必在每次显示内容时触发事件，或者如果需要使用它来处理旧代码：

Jquery extension：

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]);
    });
  }
});

用法示例：

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

这有效地允许您在Show之前和之后执行某些操作，同时仍然执行原始.show（）方法的正常行为。

^{您还可以创建另一个方法，这样就不必重写原始的 .show（）方法。}

答案 2

DOM 突变观察者正在解决该问题。它们允许您将观察者（函数）绑定到更改dom元素的内容，文本或属性的事件。

随着IE11的发布，所有主流浏览器都支持此功能，请检查 http://caniuse.com/mutationobserver

示例代码如下：

$(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="https://code.jquery.com/jquery-1.9.1.min.js"></script>