0

is it possible to bind change to a style of an element with JQuery?

Here's the code I have : 

$(".bnotify").on("change",$(".bnotify").css("display"),function(){
alert("changed");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bnotify" style="width:20px;height:20px;background:red"></div>
<input type="submit" onclick="$('.bnotify').toggle()">

So is there any way to show an alert on .bnotify's display change?

Thank you very much for spending your precious time with my issue.

Thank you very much for help.

  • There is no event raised when a style property of an element changes. It would be a much better idea to attach an unobtrusive event handler to the submit button and then perform whatever logic you require in there – Rory McCrossan Jan 04 '18 at 14:56
  • Sorry, I'm new to JQuery so I think you mean something like .css("display","none") and display block? –  Jan 04 '18 at 14:57
  • No I mean something like this:https://jsfiddle.net/8zzhuk5s/ – Rory McCrossan Jan 04 '18 at 15:00

3 Answers3

1

No, you can't. The thing is that $('.selector').css(<propName>) returns you a string, which you can't really bind with a fact, that it is supposed to be related to a style property. If you really want to observe changes in a certain DOM node, you can use MutationObserver, but don't forget to filter the mutations since this might affect performance of your application. If you have only one callback, which can affect a certain DOM node, then you can chose a simplified approach and just create something like a notification callback factory:

var createNotificationCb = function(cb, message) {
   return function() {cb.apply(this, arguments);
   alert(message)};
};
Viacheslav Moskalenko
  • 1,034
  • 8
  • 14
  • MutationObserver works flawless, thank you very much! Большое спасибо за помощь :3 –  Jan 04 '18 at 15:24
1

There is no inbuilt support for the style change event in jQuery or in java script. But jQuery supports to create custom event and listen to it but every time there is a change, you should have a way to trigger it on yourself. So it will not be a complete solution. Reference: https://stackoverflow.com/a/2158004/1715121

   
$('.bnotify').bind("style-change", function(){
    alert("changed");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bnotify" style="width:20px;height:20px;background:red"></div>
<input type="submit" onclick="$('.bnotify').toggle(); $('.bnotify').trigger('style-change')">
Ele
  • 33,468
  • 7
  • 37
  • 75
0

The Normal aproach:

$('#mybutton').click(function(){
$(".bnotify").toggle();
alert("changed");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bnotify" style="width:20px;height:20px;background:red"></div>
<input type="submit" id="mybutton">

Trigger when toggle is done:

toggleDone = function(type){
  alert("changed")
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bnotify" style="width:20px;height:20px;background:red"></div>
<input type="submit" onclick="$('.bnotify').toggle(toggleDone())">
Luis felipe De jesus Munoz
  • 7,454
  • 2
  • 33
  • 53