HTML、jQuery：1つの要素の幅を別の要素にバインドする

Question

最初の要素（foo）の幅を2番目の要素（bar）の幅にバインドしたいとします。要素 "bar"の幅を変更すると、要素 "foo"の幅が自動的に変更されるようにしたいと考えています。

以下のコードでわかるように、要素 "foo"の幅を要素 "bar"の幅に設定できますが、これは1回限りのことです。このコードが実行された後に、ページの処理中に要素 "bar"の幅が変更されるとどうなりますか？例えば"bar"はAJAX呼び出しの結果として選択要素であり、その幅が変化します。要素 "foo"はどのように幅が変更されますか？

$('#foo').width($('#bar').width()); 

おかげ

Answer 1

リサイズイベントはウィンドウのみにしていないのdiv要素のような要素にバインドされている、ここで 完全な議論は：jQuery resize not working at FireFox, Chrome and Safari

唯一の解決策は、グローバル変数を持っており、それを使用することですバーのサイズが変更されたときに更新します。 fooの幅はグローバル変数に設定されます。バーのサイズを更新するメソッドまたはコードブロックにコードを追加し、$（foo）.width（$ bar.width（））;を使用してグローバル変数またはfooサイズを直接更新します。

function setBarHeight(value) { 
    $('#bar').attr('width') = Number(value); 
    $('#foo').attr('width') = $('#bar').attr('width'); 
} 

EDIT：以下のこのjQueryアプローチは動作しません。この行の上に更新された回答。

はresize

$(document).ready(function() { 
    $('#bar').resize(function() { 
     $('#foo').width($('#bar').width()); 
    }); 
}); 

Answer 2

のためのjQueryのハンドラを追加機能で、あなたのコードを配置し、寸法を変更する可能性を秘めているAJAX呼び出しを行うたびにそれを呼び出します。あなたのAJAX呼び出しが散発的で何らかの理由でそれらを制御できない場合は、setIntervalを使って継続的に変更をチェックできます。

他のオプションは、コメントに記載されているようにjQuery pluginを使用することです。

Answer 3

他の人が言っているように、要素の寸法が変化したときに発生するイベントはありません。恐らく起こる可能性のある方法がたくさんあるからです。チェックしたい点を選択し、必要に応じて更新する必要があります。

これは、パブリッシュ/サブスクライブモデルの場合に適しています。基本的に、「#bar」要素は「サイズを変更しました」というイベントをパブリッシュし、#foo要素はそのイベントをサブスクライブします。これにより、任意の数の要素を公開し、任意の数の加入者が互いに知り合わなくても簡単かつスケーラブルになります。 jQueryを使って

： - AJAX要求からのコールバックでは、タイミングループに、ウィンドウのサイズが変更される。もちろん、

$(function(){ 
    // The document object acts as the 'subscription service' - 
    // it receives all events via bubbling. 
    document.bind('layout.resizeCheck', function(){ 
     $('#bar').width(whatever); 
    }); 

    // Whenever you need to update the size: 
    $('#foo').trigger('layout.resizeCheck'); 
}); 

、あなたはしかし、あなたが好きresizeCheckイベントをトリガすることができます。特定の要素から呼び出していない場合は、$(document).trigger('layout.resizeCheck')を使用してください。あなたのAJAX呼び出しが#bar選択ボックスからの値の選択にトリガされた場合は、このスニペットは動作するはず

$('#bar').change(function() { 
    $('#foo').width($('#bar').width()); 
}); 

：

Answer 4

はこれを試してみてください。.change(function{...});の代わりに.bind('keyup change', function(){...});を試してみることもできます