[解決済み】ボタンがLoading状態の時にスピナーアイコンを追加する方法は？

質問

ツイッター Bootstrapのボタン には素敵な Loading... の状態が利用できます。

のようなメッセージが表示されるだけなことです。 Loading... を通過して data-loading-text 属性はこのようになります。

<button type="button" class="btn btn-primary start" id="btnStartUploads"
        data-loading-text="@Localization.Uploading">
    <i class="icon-upload icon-large"></i>
    <span>@Localization.StartUpload</span>
</button>

Font Awesome を見てみると、現在では アニメーションスピナーアイコン .

そのスピナーアイコンを Upload の操作で、このようになります。

$("#btnStartUploads").button('loading');
$("#btnStartUploads i").removeAttr('class');
$("#btnStartUploads i").addClass('icon-spinner icon-spin icon-large');

が、これは全く効果がなく、つまり、ただ単に Uploading... のテキストがボタンに表示されます。

ボタンがLoading状態の時にアイコンを追加することは可能でしょうか？どうやら、Bootstrapはアイコンを削除してしまうようです。 <i class="icon-upload icon-large"></i> が表示されます。

以下は、簡単な デモ は、私が上で説明した動作を示しています。ご覧のように、ロード状態になるとアイコンが消えます。時間が経つとすぐに再表示されます。

解決方法は？

を見ると ブートストラップボタン.js のソースを見ると、bootstrap プラグインがボタンの内側の html を データローディングテキスト を呼び出したとき $(myElem).button('loading') .

あなたの場合、私は 思う をすればいいだけです。

<button type="button"
        class="btn btn-primary start"
        id="btnStartUploads"
        data-loading-text="<i class='icon-spinner icon-spin icon-large'></i> @Localization.Uploading">
    <i class="icon-upload icon-large"></i>
    <span>@Localization.StartUpload</span>
</button>