Question

我正在尝试在我的网站中使用带有data-toggle="buttons-radio"的Twitter Bootstrap按钮组。 Bootstrap标记如下。

<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;行，我设法观察到第二次点击，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

Answer 1

我不确定Bootstrap的.toggle究竟做了什么，但它看起来像是通过设置active类来完成某种动画。您可以尝试使用代码来代码：

$( '.program-status > .btn').on('click', function (e){
    $(this).queue(function (next) {
        redirectToUpdatedLocation();
        next();
    });
});

例如，在切换时点击div：http://jsfiddle.net/9HwYy/

对于我来说，更新每个 href而不仅仅是您点击的那个，因为您无论如何都要更改窗口位置，这似乎有点傻。

Answer 2

试

$('.program-status > .btn.active').each(function(i,v){
  v = $(v);
  addToParamStr( '?status=' + v.text());
});

因为我不确定“这个”是否适用于你的情况。

如何在以前的点击绑定完成时执行.click（）代码

2 个答案: