How to execute .click () code upon completion of linking with a previous click

Question

I am trying to use Twitter Bootstrap button group with data-toggle="buttons-radio" on my site. Boot markup as follows.

 <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> 

I need to redirect to the same page with the request depending on the button clicked. I tried using the following jQuery code for this.

 <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> 

But the browser always redirects to {site} / program without a query string. Commenting out the line window.location.href = "program" + sParamStr; I managed to notice that the second click forward, sParamStr will be added correctly.

It seems like my code is trying to read the text of the pressed button before it has finished the form of the form .button('toggle') formstock.js. The code worked as intended when I changed the function as follows.

 $document.ready(function () { $( '.program-status > .btn').on('click', function (e) { $(this).addClass('active'); redirectToUpdatedLocation(); }); }); 

While this method works for me right now, I would like to know the right way to achieve this. ie How do I execute my code after the last click binding?

UPDATE:

I found this link in the Twitter Bootstrap forum. This seems to be a known issue. https://github.com/twitter/bootstrap/issues/2380

Answer 1

I'm not sure if Bootstrap .toggle performs exactly, but it looks like it does some animation that ends with setting the class active . Instead, you can try entering your code:

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

For example, click div when it switches: http://jsfiddle.net/9HwYy/

---

It also seems a little silly to me to update every href , not just the one you clicked on, since you are changing the location of the window anyway.

Answer 2

to try

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

since im not sure if "this" works in your case.