Twitter的引導複選框鍵的值改爲

我有一個複選框按鈕組這樣的：Twitter的引導複選框鍵的值改爲

<div class="btn-group" id="id_group" data-toggle="buttons-checkbox"> 
    <button class="btn myclass" type="button" data-value="0">Value 0</button> 
    <button class="btn myclass" type="button" data-value="1">Value 1</button> 
</div>

而且JS事件處理程序：

$(".myclass").click(function(event) { 
    console.log($(".myclass.active").length); 
    console.log($(this).hasClass("active")); 
});

我想要得到的data-value對於所有選中的按鈕，但在上點擊事件，active類尚未設置。這意味着，當我第一次點擊一個按鈕，輸出是：

>>> 0 
>>> false

，下一次我點擊相同的按鈕（即取消選中），輸出爲：

>>> 1 
>>> true

這意味着在事件發生後將設置active課程。

如何在點擊事件期間獲得按鈕的實際狀態？

來源

2012-11-05 Augusto Men

如果每次將類active添加到按鈕時都拼命想要一個事件，則可以修改bootstrap.js。 active在由點擊觸發的小功能Button.prototype.toggle設置/取消，線路1362至1370年：

Button.prototype.toggle = function() { 
    var $parent = this.$element.closest('[data-toggle="buttons-radio"]') 

    $parent && $parent 
     .find('.active') 
     .removeClass('active') 

    this.$element.toggleClass('active') 
    }

改變這

Button.prototype.toggle = function() { 
    var $parent = this.$element.closest('[data-toggle="buttons-radio"]') 

    $parent && $parent 
     .find('.active') 
     .removeClass('active') 

    this.$element.toggleClass('active') 

    if (this.$element.hasClass('active')) { 
     this.$element.trigger('active') 
    } 
    }

現在你可以綁定到.myclass

$(".myclass").on('active', function() { 
    console.log($(".myclass.active").length); 
    console.log($(this).hasClass("active")); 
});

事件

或者，如果您認爲上述內容太髒 - 您可以通過遵循骨架d來擴展/修改Button.prototype（添加方法，選項等）這裏記錄下How to Extend Twitter Bootstrap Plugin

來源

2012-11-06 00:56:31 davidkonrad

您已經推導出正確。點擊事件尚未更新活動類，因此當您搜索它們時，它不會返回。班級變更不會觸發事件。

然而，你可以做的是添加一個setTimout，比如100ms，足夠的時間讓點擊事件觸發。請注意，您可能需要調整延遲以允許事件傳播。

來源

2012-11-05 17:35:39 Kami

我一直在點擊事件和活動類的時間問題！

進一步davidkonrad的答案和使用this post我想出了以下內容，以避免不必修改引導源，但比全覆蓋輕一點。

var _old_toggle = $.fn.button.prototype.constructor.Constructor.prototype.toggle; 

$.fn.button.prototype.constructor.Constructor.prototype.toggle = function() { 
    _old_toggle.apply(this); 

    if (this.$element.hasClass('active')) { 
     this.$element.trigger('active') 
    } 
}

來源

2012-12-11 11:29:54 Dave

我用jQuery的data管理存儲的active狀態，其切換按鈕的點擊。不是很好，但它是一些東西。

來源

2013-06-26 14:02:09

Twitter的引導複選框鍵的值改爲

回答

相關問題