在CSS更改时使用Jquery触发事件？

我很好奇是否有一个事件监听器或者一种方法来构造一个在CSS发生变化时会触发的方法？

我的样式表使用媒体查询，我想知道是否有一种方法可以附加一个监听器，以查看这些媒体查询何时进出。 例如，我有一个媒体查询，隐藏某个屏幕宽度的按钮

@media screen and (max-width: 480px) { #search-button { display: none; } } 

我将使用什么事件监听器来检测该显示何时发生变化？ 我目前正在这样做：

 $(window).resize(function() { if($('#search-button').css("display") == "none") { //do something } else { //do something else } }); 

哪个工作正常，但每次用户更改屏幕时都会调用监听器，而我只是在按钮的css发生变化时才启动它。 我希望这是有道理的。

例如，这就是我想要的

 $('#search-button').cssEventListenerOfSomeKind(function() { alert('the display changed'); }); 

Answer 1

绑定到window.resize是你最好的选择（我相信）。 更改元素的CSS时没有触发任何事件。 但是，您可以通过缓存使用的选择器来优化一点：

 var $searcButton = $('#search-button'); $(window).resize(function() { if($searcButton.css("display") == "none") { //do something } else { //do something else } }); 

或者您可以使用$(window).width()来检查视口的宽度：

 var $window = $(window); $window.resize(function() { if($window.width() <= 480) { //do something } else { //do something else } }); 

UPDATE

您始终可以限制自己的事件处理程序：

 var $window = $(window), resize_ok = true, timer; timer = setInterval(function () { resize_ok = true; }, 250); $window.resize(function() { if (resize_ok === true) { resize_ok = false; if($window.width() <= 480) { //do something } else { //do something else } } }); 

这将阻止resize事件处理程序中的代码每四分之一运行一次以上。

Answer 2

如果它只是一次性事件，您可以尝试解除绑定事件。

http://api.jquery.com/unbind/

Answer 3

我知道这是旧的，但我设法用这个逻辑来解决它

  // set width and height of element that is controlled by the media query var page_width = $page.width(); var page_height = $page.height(); $window = $(window).resize(function(){ if( $page.width() != page_width ) { // update page_width and height so it only executes your // function when a change occurs page_width = $page.width(); page_height = $page.height(); // do something // ... } });