javascript - 動的テキスト ボックスを追加するときに動的な高さを更新する

Question

私のページには 2 つのフローティング div があります。それらを div.left と div.right と呼びましょう。jQuery を使用して div.right の高さを div.left に追加しています。

div.right は基本的に入力フィールドでいっぱいで、jquery を使用してボタンのクリック時にテキスト ボックスを追加しています。問題は、さらにテキスト ボックスを追加すると、div.left の高さが更新されないことです。

私の HTML の基本的なバージョンは次のようになります。

    <div class="left" style="float:left"></div>
    <div class="right" style="float:right">
         <input type="text" name="textbox" />
         <input type='button' value='Add another' id='AddButton'> 
    </div>
    <div style="clear:both;"></div>

この場合、#AddButton は別のテキスト ボックスを追加します。

div.left に高さを追加する jQuery:

     $(window).load(function () {
        var MainHeight = $('div.left');
        $('div.right').css('height', (MainHeight.height()) + 'px');
    });

これを使用してテキストボックスを追加しています http://www.naragoni.com/jquery/how-to-add-remove-textbox-dynamically-with-jquery/

div.right が増加するにつれて div.left の高さを更新するにはどうすればよいですか?