Why doesn't this resize handler work?

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

Perhaps use a small function that checks onresize if the width of the element has changed. Resize your browser and check the result of the console log.

 $(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> 

Answer 2

I think you need to reference this link

http://marcj.imtqy.com/css-element-queries/

I just checked with this js, it worked for me to download this file and check it out, hope this helps you

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