Trigger Event Using Jquery on CSS Change

Is it possible to listen to a style change event?

Since jQuery is open-source, I would guess that you could tweak the css function to call a function of your choice every time it is invoked (passing the jQuery object). Of course, you'll want to scour the jQuery code to make sure there is nothing else it uses internally to set CSS properties. Ideally, you'd want to write a separate plugin for jQuery so that it does not interfere with the jQuery library itself, but you'll have to decide whether or not that is feasible for your project.

Trigger event using Jquery on CSS change?

Binding to the window.resize is your best option (I believe). There isn't any event fired when you change an element's CSS. You can however optimize a bit by caching the selector used:

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

Or you can use $(window).width() to check the width of the viewport:

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

UPDATE

You can always throttle your own event handler:

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

This will prevent the code in your resize event handler from running more than once every quarter second.

Firing events on CSS class changes in jQuery

Whenever you change a class in your script, you could use a trigger to raise your own event.

$(this).addClass('someClass');
$(mySelector).trigger('cssClassChanged')
....
$(otherSelector).bind('cssClassChanged', data, function(){ do stuff });

but otherwise, no, there's no baked-in way to fire an event when a class changes. change() only fires after focus leaves an input whose input has been altered.

$(function() {  var button = $('.clickme')      , box = $('.box')  ;    button.on('click', function() {     box.removeClass('box');    $(document).trigger('buttonClick');  });              $(document).on('buttonClick', function() {    box.text('Clicked!');  });});

.box { background-color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">Hi</div><button class="clickme">Click me</button>

How to fire an event on class change using jQuery?

There is no event raised when a class changes. The alternative is to manually raise an event when you programatically change the class:

$someElement.on('event', function() {
    $('#myDiv').addClass('submission-ok').trigger('classChange');
});

// in another js file, far, far away
$('#myDiv').on('classChange', function() {
     // do stuff
});

UPDATE - 2015

This question seems to be gathering some visitors, so here is an update with an approach which can be used without having to modify existing code using the new MutationObserver:

var $div = $("#foo");
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    var attributeValue = $(mutation.target).prop(mutation.attributeName);
    console.log("Class attribute changed to:", attributeValue);
  });
});

observer.observe($div[0], {
  attributes: true,
  attributeFilter: ['class']
});

$div.addClass('red');

.red {
  color: #C00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="foo" class="bar">#foo.bar</div>

jQuery event that triggers when the element had some structure change

Since you're asking about JQuery, I ran into a similar challenge and found the answer here in another question:

jQuery: How to listen for DOM changes?

I hope this helps!

jQuery event that triggers after CSS is loaded?

Rather than creating a new link element and appending it to the head, you could retrieve the contents of the stylesheet with an AJAX call, and insert it into an inline style block. That way, you can use jQuery's 'complete' callback to fire off your check.

$('#theme-selector a').click(function(){
  var path = $(this).attr('href');
  $.get(path, function(response){
   //Check if the user theme element is in place - if not, create it.
   if (!$('#userTheme').length) $('head').append('<style id="userTheme"></style>');

   //populate the theme element with the new style (replace the old one if necessary)
   $('#userTheme').text(response);

  //Check whatever you want about the new style:
  alert($('body').css('background-color'));
  });
});

I haven't actually tested this code, so there may be some syntax-y errors, but the logic should be sound enough.

Using jQuery to trigger a change event in a Custom UL LI box

You could use :

$(".select ul").on('click', function(e) {
    alert('change has been made');
});

Hope this helps.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <style type="text/css">      * {        font-family: Segoe UI;        font-size: 9pt;      }      .select {        margin: 0;        padding: 0;      }      .select dd, .select dt, .select ul {        margin: 0px;        padding: 0px;      }      .select dd {        position: relative;      }      .select a, .select a:visited {        color: #000;        text-decoration: none;        outline: none;      }      .select dt:hover, .select dd ul:hover {        border-color: rgb(128,128,128);      }      .select dd ul li a:hover {        background-color: rgb(112, 146, 190);        color: #FFF;      }      .select dt {        background: url(arrow.png) no-repeat scroll right center;        display: block;        padding-right: 20px;        border: 1px solid rgb(170, 170, 170);        width: 180px;        overflow: hidden;      }      .select dt span {        cursor: pointer;        display: block;        padding: 4px;        height: 15px;      }      .select dd ul {        background: #fff none repeat scroll 0 0;        border-bottom: 1px solid rgb(170, 170, 170);        border-left: 1px solid rgb(170, 170, 170);        border-right: 1px solid rgb(170, 170, 170);        border-top: 0;        display: none;        left: 0px;        padding: 5px 0px;        position: absolute;        top: -1px;        width: auto;        min-width: 200px;        list-style: none;      }      .select dd ul li a {        padding-left: 10px;        padding-top: 3px;        padding-bottom: 3px;        display: block;      }      .selected {        background: rgb(195, 195, 195);      }      .header-list, .header-list:hover {        padding-left: 3px;        font-weight: bold;        font-style: italic;        cursor: pointer;      }
    </style>
    <script type="text/javascript">
      $(document).ready(function() {
        $(".select ul").on('click', function(e) {          alert('change has been made');        });
        $(".select dt").click(function(e) {          e.stopPropagation();          var select = $(this).closest('.select');          // close all other selects          $('.select').not(select).find('ul').hide();
          select.find('ul').toggle();          select.find("dt, dd ul").css('border-color', 'rgb(128,128,128)')
          select.find("dt, span, dd ul").css('background-color', 'rgb(255,255,196)')
        });
        $(".select dd ul li a").click(function(e) {          var text = $(this).html();          var select = $(this).closest('.select');
          if ((select.data('val') == 'multiple') && (e.ctrlKey)) {            e.stopPropagation()            $(this).addClass('selected');            select.find('dt span').html("(" + select.find('a.selected').length + ")");
          }          else {            var text = $(this).html();            select.find("dd a").removeClass('selected');            $(this).addClass('selected');            select.find("dt span").html(text);            //select.find("dt a").css("background-color", "");            select.find("dd ul").hide();          }        });
        $(document).bind('click', function() {          $(".select dd ul").hide();          $(".select dt, .select dd ul").css('border-color', '');        });
      });    </script>
  </head>
  <body> 
    <dl class="select">      <dt><span id="vegetables"></span></dt>      <dd>        <ul>          <li><a href="#"> </a></li>          <li><a href="#">Carrots</a></li>          <li><a href="#">Celery</a></li>          <li><a href="#">Brocoli</a></li>        </ul>      </dd>    </dl>

    <dl class="select">      <dt><span id="fruits"></span></dt>      <dd>        <ul>          <li><a href="#"> </a></li>          <li><a href="#">Apples</a></li>          <li><a href="#">Oranges</a></li>          <li><a href="#">Bananas</a></li>        </ul>      </dd>    </dl>

  </body>
</html>

Trigger Event Using Jquery on CSS Change

Is it possible to listen to a style change event?