HTML, jQuery: Bind width of one element to another

I'd like to bind the width of a first element (foo) to the width of a second element (bar). I would want element "foo" to have its width change automatically when the width of element "bar" is changed.

I know I can set the width of element "foo" to the width of element "bar" as we can see in the code below, but this is a one-time thing. What happens if the width of element "bar" changes somewhere in the processing of the page after this code is executed? e.g. "bar" i开发者_如何转开发s a select element and its width changes as a result of an AJAX call - how would element "foo" get its width changed?

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

Thanks

Resize events are bound only to the window and not to elements like divs, full discussion here: jQuery resize not working at FireFox, Chrome and Safari

The only solution would be to have a global variable and use it to update when bar size is changed. foo's width is set to the global variable. Add code in the method or code block that updates bar size, to update the global variable or the foo size directly using $(foo).width($bar.width());

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

EDIT: This jQuery approach below doesn't work, updated answer above this line.

Add jquery handler for resize

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

As other people have said, there's no event that fires when an element's dimensions change - probably because there are so many ways that that can happen. You will need to choose the points that you want to check, and update if neccessary.

This is a good case for a publish/subscribe model: Basically, your '#bar' element would publish an event, saying "I've changed size", and your #foo element would subscribe to that event. This makes it easy and scalable to have any number of elements publish, and any number subscribe, without them having to 'know about' each other.

With jQuery:

$(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');
});

Of course, you can trigger the resizeCheck event however you like - in a callback from an ajax request, on a timed loop, when the window resizes. If you're not calling from a particular element, just use $(document).trigger('layout.resizeCheck').

Place your code in a function and call it whenever you make an AJAX call that has the potential to change the dimensions. If your AJAX calls are sporadic and for some reason you don't have control over them you can use setInterval to check for changes continuously.

Your other option is to use a jQuery plugin as mentioned in the comments.

Try this:

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

This snippet should work if your AJAX call is triggered on the selection of value from the #bar select box. You can also try using .bind('keyup change', function(){...}); instead of .change(function{...});