このサイズ変更ハンドラが機能しないのはなぜですか？

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

たぶん要素の幅が変更された場合はさらにonResizeチェックはほとんどの機能を使用する際に役立つことを願ってのために働いています。ブラウザのサイズを変更し、コンソールログ結果をチェックアウトします。

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

私はあなたが私はこれをチェックした

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

このリンクを参照してくださいする必要があると思いますJSこれは私には、このファイルをダウンロードし、それを確認し、これはあなたが

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