サイトで Twitter Bootstrap ボタン グループを使用しようとしdata-toggle="buttons-radio"
ています。ブートストラップ マークアップは次のとおりです。
<div class="btn-group program-status" data-toggle="buttons-radio">
<button class="btn">All</button>
<button class="btn">Active</button>
<button class="btn">Planning</button>
<button class="btn">End of Life</button>
<button class="btn">Cancelled</button>
</div>
押されたボタンに応じて、クエリで同じページにリダイレクトする必要があります。これを達成するために、次のjQueryコードを使用しようとしました。
<script>
var sParamStr = '';
function addToParamStr(str) {
sParamStr += str;
}
function redirectToUpdatedLocation() {
$('.program-status > .btn.active').each(function () {
addToParamStr( '?status=' + $(this).text());
});
console.log(sParamStr);
window.location.href = "program" + sParamStr;
}
$document.ready(function () {
$('.program-status > .btn').on('click', function (e) {
redirectToUpdatedLocation();
});
});
</script>
ただし、ブラウザは常にクエリ文字列なしで {site}/program にリダイレクトします。行をコメントアウトwindow.location.href = "program" + sParamStr;
することで、2回目以降のクリックsParamStr
が適切に追加されることを確認できました。
私のコードは、以前に押されたボタンのテキストを読み込もうとしているようです.button('toggle')
.メソッドフォームbootstrap.jsは終了しました. 次のように関数を変更すると、コードは意図したとおりに機能しました。
$document.ready(function () {
$( '.program-status > .btn').on('click', function (e) {
$(this).addClass('active');
redirectToUpdatedLocation();
});
});
この方法は今のところうまくいきますが、これを達成するための適切な方法を知りたいです。つまり、前のクリック バインディングが終了した後にコードを実行するにはどうすればよいですか?
アップデート:
Twitter Bootstrap フォーラムでこのリンクを見つけました。既知の問題のようです。 https://github.com/twitter/bootstrap/issues/2380