Bootstrap jQuery「Active」選擇器事件

在我的網頁上，我有三個用於篩選的複選框，它們都通過「程式化」引導來使用「ticks」而不是標準複選框。Bootstrap jQuery「Active」選擇器事件

全部標記

<!DOCTYPE html> 
<html> 
<head> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

    <style> 
     .RAGStatus2 { 
     } 

      .RAGStatus2 .active .checked { 
       display: inline-block; 
      } 

      .RAGStatus2 .checked { 
       display: none; 
      } 
    </style> 


</head> 
<body> 
    <span class="RAGStatus2 pull-right"> 
     <span class="btn-group" data-toggle="buttons"> 
      <label class="ragButtons btn btn-info active" style="width:50px; height: 30px; display: inline" id="blue"> 
       <input disabled="disabled" type="checkbox" id="[email protected](ITOpsStatus.DataAccess.AlertLevel.Blue)" autocomplete="off" value="@(ITOpsStatus.DataAccess.AlertLevel.Blue)" class="[email protected](ITOpsStatus.DataAccess.AlertLevel.Blue)" /> 
       <span class="glyphicon glyphicon-hidden unchecked"></span> <span class="glyphicon glyphicon-ok checked"></span> 
      </label> 
      <label class="ragButtons btn btn-warning active" style="width:50px; height: 30px; display: inline" id="amber"> 
       <input disabled="disabled" type="checkbox" id="[email protected](ITOpsStatus.DataAccess.AlertLevel.Amber)" autocomplete="off" value="@(ITOpsStatus.DataAccess.AlertLevel.Amber)" class="[email protected](ITOpsStatus.DataAccess.AlertLevel.Amber)" /> 
       <span class="glyphicon glyphicon-hidden unchecked"></span> <span class="glyphicon glyphicon-ok checked"></span> 
      </label> 
      <label class="ragButtons btn btn-danger active" style="width:50px; height: 30px; display: inline" id="red"> 
       <input disabled="disabled" type="checkbox" id="[email protected](ITOpsStatus.DataAccess.AlertLevel.Red)" autocomplete="off" value="@(ITOpsStatus.DataAccess.AlertLevel.Red)" class="[email protected](ITOpsStatus.DataAccess.AlertLevel.Red)" /> 
       <span class="glyphicon glyphicon-hidden unchecked"></span> <span class="glyphicon glyphicon-ok checked"></span> 
      </label> 
     </span> 
    </span> 

    <textarea id="debug" style="width: 100%; height: 300px"></textarea> 

    <script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 


    <script type="text/javascript"> 
     $(function() { 
      $(".ragButtons").change(function (e) { 
       $("#debug").val(""); 
       $(".ragButtons").each(function() { 
        if ($(this).hasClass("active")) { 
         $("#debug").val($("#debug").val() + $(this).attr("id") + "\r\n"); 
        } 
       }); 
      } 
      ); 
     }); 
    </script> 
</body> 
</html>

這裏的的jsfiddle =>https://jsfiddle.net/0qrqcbvd/

現在，我的問題是，當我點擊其中一個框，我想與有源濾波器Ajax調用只有click（）事件不會在時間上停用按鈕...它總是落後一步......

當窗體打開時，所有三個都設置爲活動...

點擊按鈕來關閉之一，調試仍顯示所有三個
再次單擊它可以重新開啓，調試現在顯示兩個（我們點擊一個未顯示）
點擊它第三次（再次關閉），然後再次顯示所有三個（應該是2）。

我試過用「onmouseup」，但得到了同樣的結果

* UPDATE *

當我張貼了這個片斷中，我使用了最新版本的引導/ jQuery的這做的其實解決這個問題，但是，這個代碼是從使用提取的實際系統的引導程序3.0.0和jQuery 1.10.2

以下是最新的jsfiddle =>https://jsfiddle.net/0qrqcbvd/16/

來源

2016-08-03 Chris Hammond

這是因爲BUTTON DATA-API使用委託事件處理程序來切換複選框的狀態。

的解決方案是使用由button插件觸發change事件像

$(function() { 
 
    $(".ragButtons").change(function(e) { 
 
    $("#debug").val($(".ragButtons.active").map(function() { 
 
     return this.id; 
 
    }).get().join('\r\n')); 
 
    }); 
 
});

.RAGStatus2 {} .RAGStatus2 .active .checked { 
 
    display: inline-block; 
 
} 
 
.RAGStatus2 .checked { 
 
    display: none; 
 
}

<script src="https://code.jquery.com/jquery-1.10.0.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script> 
 
<span class="RAGStatus2 pull-right"> 
 
     <span class="btn-group" data-toggle="buttons"> 
 
      <label class="ragButtons btn btn-info active" style="width:50px; height: 30px; display: inline" id="blue"> 
 
       <input disabled="disabled" type="checkbox" checked id="[email protected](ITOpsStatus.DataAccess.AlertLevel.Blue)" autocomplete="off" value="@(ITOpsStatus.DataAccess.AlertLevel.Blue)" class="[email protected](ITOpsStatus.DataAccess.AlertLevel.Blue)" /> 
 
       <span class="glyphicon glyphicon-hidden unchecked"></span> <span class="glyphicon glyphicon-ok checked"></span> 
 
</label> 
 
<label class="ragButtons btn btn-warning active" style="width:50px; height: 30px; display: inline" id="amber"> 
 
    <input disabled="disabled" type="checkbox" checked id="[email protected](ITOpsStatus.DataAccess.AlertLevel.Amber)" autocomplete="off" value="@(ITOpsStatus.DataAccess.AlertLevel.Amber)" class="[email protected](ITOpsStatus.DataAccess.AlertLevel.Amber)" /> 
 
    <span class="glyphicon glyphicon-hidden unchecked"></span> <span class="glyphicon glyphicon-ok checked"></span> 
 
</label> 
 
<label class="ragButtons btn btn-danger active" style="width:50px; height: 30px; display: inline" id="red"> 
 
    <input disabled="disabled" type="checkbox" checked id="[email protected](ITOpsStatus.DataAccess.AlertLevel.Red)" autocomplete="off" value="@(ITOpsStatus.DataAccess.AlertLevel.Red)" class="[email protected](ITOpsStatus.DataAccess.AlertLevel.Red)" /> 
 
    <span class="glyphicon glyphicon-hidden unchecked"></span> <span class="glyphicon glyphicon-ok checked"></span> 
 
</label> 
 
</span> 
 
</span> 
 

 
<textarea id="debug" style="width: 100%; height: 300px"></textarea>

來源

2016-08-03 09:20:37

OK ....我說話太快了......當我設置的jsfiddle .. 。我使用了最新的jQuery（3.1.0），但我的系統使用的是1.10，但它仍然不起作用 –

@ChrisHammond它與1.10一起工作也 –

Bootstrap jQuery「Active」選擇器事件

回答

相關問題