Why this resize handler is not working? [duplicate]

Question

https://jsfiddle.net/57org2ve/2/

HTML:

<div id="at" style="width:100%;background:red">
This is a div, you can click on me or resize me. 
</div>

JavaScript:

$('#at').resize(function(){alert(1)})
$('#at').click(function(){alert(2)})

Answer 1

I think you need to refer this link

http://marcj.github.io/css-element-queries/

I have just checked with this js this is worked for me download this file and check it ,hope this will help you

var element = document.getElementById('at');
new ResizeSensor(element, function() {
   console.log('Changed to ' + element.clientWidth);
});

Answer 2

Maybe use a little function which check onresize if the width of element has changed. Resize the browser and check out console log result.

$(window).resize(function(){

  var obj = $('#at')[0];
  if(detectResize(obj)) console.log('resize detected');

});


function detectResize(getObject){
  var getWidth = getObject.getBoundingClientRect().width;
  if(getObject.currentWidth===getWidth){
    return false;
   } else {
     getObject.currentWidth = getWidth;
     return true;
   }
}

#at{
  width:100%;
  max-width:400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="at" style="background:red">
This is a div, you can click on me or resize me. 
</div>