jquery - jqueryでボタンの幅を変更する

Question

ボタンの幅をjqueryでその上のテキストボックスの幅に合わせて変更しようとしています。次の行を使用してこれを達成しようとしました。

$("#myButton").css("width", $("#textbox").width());

以下のコードでは：

JSFiddle

JQuery:

$('#tabs').tabs();
$("#myButton").css("width", $("#textbox").width());

HTML:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1"> Tab 1</a></li>
        <li><a href="#tabs-2" id="productTab">Tab 2</a></li>
    </ul>
    <div id="tabs-1" class="buttons" class="ui-widget">
    </div>
    <div id="tabs-2">
        <table>
            <tr>
                <td>
                    <input type="text" id="textbox" />
                </td>
            </tr>
            <tr>
                <td>
                    <button id="myButton">My Button
                    </button>
                </td>
            </tr>
        </table>
    </div> 
</div>

タブを使用しているため、テキスト ボックスの幅がすぐに利用できないと思います。

Answer 1

フォームを含むタブをクリックすると、幅を設定できます。ここを参照してください：http://jsfiddle.net/4EfAJ/16/

$('#tabs').tabs();
$("#productTab").on("click",function() {
    $("#myButton").css("width", $("#textbox").width());
});

Answer 2

ボタンに幅を割り当てるだけで、より柔軟になります。彼が見えても見えなくてもおかしくありません。

#textbox {
  width: 250px
}

css で問題を解決できる場合は、javascript を開始する前に常にこの方法を選択してください。

Answer 3

これはうまくいくはずだと思います

$("#myButton").css("width", $("#textbox").css("width"));

Answer 4

タブが表示される前ではなく、タブが表示されたらボタンの幅を変更してみてください。

 $('#tabs').tabs({
  activate: function(event, ui){
    if (ui.newTab.index() == 1){
        $("#myButton").css("width", $("#textbox").width() );
    }
  }
});