Bootstrap jQuery "Aktives" Selektor-Ereignis

Auf meiner Webseite habe ich drei Kontrollkästchen zum Filtern und sie haben alle durch "stilisiert" mit Bootstrap "Ticks" anstelle der Standard-Kontrollkästchen zu verwenden.Bootstrap jQuery "Aktives" Selektor-Ereignis

Vollauszeichnungs

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

Hier ist die jsfiddle =>https://jsfiddle.net/0qrqcbvd/

Nun, mein Problem ist, dass wenn ich eine der Boxen klicken, möchte ich einen Ajax-Aufruf mit dem aktiven Filter machen nur, aber das Ereignis click() deaktiviert die Schaltfläche nicht rechtzeitig ... es ist immer einen Schritt zurück ..

Wenn das Formular geöffnet wird, werden alle drei auf aktiv gesetzt ...

Klicken Sie auf eine der Schaltflächen auszuschalten, debug noch alle es drei zeigt wieder
Klicken Sie wieder einzuschalten, zeigt Debug nun zwei (diejenige, die wir zeigen, sind klicken nicht)
es um ein drittes Mal (wieder aus), dann wieder alle drei wieder (sollte 2 sein).

Ich habe mit dem "onmouseup" versucht, aber das gleiche Ergebnis

erhalten * UPDATE *

Wenn ich diesen Schnipsel gepostet, ich die neueste Version von Bootstrap/jQuery verwendet, die funktioniert Bootstrap 3.0.0 und jQuery tatsächlich das Problem lösen, aber das eigentliche System, das dieser Code von Anwendungen extrahiert 1.10.2

Hier ist die neueste jsFiddle =>https://jsfiddle.net/0qrqcbvd/16/

Quelle

2016-08-03 Chris Hammond

Es ist, weil die BUTTON DATA-API einen delegierten Ereignishandler verwenden, um den Status der Kontrollkästchen umzuschalten.

Die Lösung ist das change Ereignis durch das button Plugin ausgelöst zu verwenden, wie

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

Quelle

2016-08-03 09:20:37

OK .... Ich sprach zu früh ..., wenn ich die jsFiddle einrichten .. Ich benutze die neueste jQuery (3.1.0), aber meine Systeme verwendet 1.10 und es funktioniert immer noch nicht –

@ChrisHammond es funktioniert auch mit 1.10 –

Bootstrap jQuery "Aktives" Selektor-Ereignis

Antwort

Verwandte Themen