Bootstrap und jQuery klicken Ereignis nicht funktioniert

Ich habe ein div Element mit ein paar inputs. Als ich anfing, dies zu programmieren, hatte ich nur jQuery und mein click Ereignis für die Eingaben funktionierte richtig.
Dann habe ich Bootstrap hinzugefügt, und das Ereignis hörte auf zu arbeiten.
Dies ist der CodeBootstrap und jQuery klicken Ereignis nicht funktioniert

<!DOCTYPE html> 
<html> 
<head> 
<title>Qué Pido?</title> 
</head> 
<body> 

<p id="que-pido"></p> 

<!-- jQuery and Bootstrap --> 
<script 
    src="https://code.jquery.com/jquery-3.1.1.min.js" 
    integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
    crossorigin="anonymous"></script> 

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
    getFromEndpoint("clasicas");  
    }); 

    function getFromEndpoint(endpoint) { 
    $(document).ready(function() { 
     $.get("que" + "/" + endpoint, function(data) { 
     console.log(data); 
     $("#que-pido").html(data); 
     }); 
    }); 
    } 

    $(document).ready(function() { 
    $(".categorias").click(function() { 
     console.log("clicked: " + $(this)); 
     var endpoint = $(this).attr('id'); 
     getFromEndpoint(endpoint); 
    }); 
    }); 
</script> 

<div class="btn-group" data-toggle="buttons"> 
    <label class="btn btn-outline-primary active"> 
    <input type="radio" name="categorias" class="categorias" id="clasicas" autocomplete="off" checked> Cl&aacute;sicas 
    </label> 
    <label class="btn btn-outline-primary"> 
    <input type="radio" name="categorias" class="categorias" id="etnicas" autocomplete="off"> &Eacute;tnicas 
    </label> 
    <label class="btn btn-outline-primary"> 
    <input type="radio" name="categorias" class="categorias" id="todas" autocomplete="off"> Todas 
    </label> 
</div> 

</body> 
</html>

Wenn ich die labels entfernen, dann die click Methode richtig gebrannt wird ... aber natürlich, bekomme ich keine der CSS, die Bootstrap zur Verfügung stellt.
Ich habe auch versucht, Bootstrap JS zu entfernen, aber dann verliere ich die Animation, die passiert, wenn Sie auf jede Taste drücken, und ich würde das gerne behalten, wenn möglich.

Irgendwelche Ideen dazu?
Vielen Dank im Voraus

Quelle

2016-12-14 jmm

Alle Fehler in der Dev-Konsole? – j08691

@ j08691 keine Fehler. Die Zeile 'console.log (Daten);' ist nicht einmal geloggt – jmm

@ Alexandru-Ionut Mihai Entschuldigung, ich habe nicht verstanden, was Plugin Sie – jmm

Der Grund, dass dies nicht funktioniert, ist, dass Bootstrap die Eingabeelemente verbirgt. Sie klicken tatsächlich auf das Label in einem Schaltflächenset, nicht auf die tatsächlichen Elemente.

Ein weiterer Aspekt der Bootstrap-Schaltflächengruppen ist, dass Sie den Optionsschalter verlieren. Hier ist ein Markup, das ein Häkchen Glyphicon hinzufügt.

<div class="btn-group" data-toggle="buttons"> 
    <label class="btn btn-outline-primary active"> 
    <span class="glyphicon"></span> 
    <input type="radio" name="categorias" class="categorias" id="clasicas" autocomplete="off" checked> Cl&aacute;sicas 
    </label> 
    <label class="btn btn-outline-primary"> 
    <span class="glyphicon"></span> 
    <input type="radio" name="categorias" class="categorias" id="etnicas" autocomplete="off"> &Eacute;tnicas 
    </label> 
    <label class="btn btn-outline-primary"> 
    <span class="glyphicon"></span> 
    <input type="radio" name="categorias" class="categorias" id="todas" autocomplete="off"> Todas 
    </label> 
</div> 

<script type="text/javascript"> 
    var setIcons = function() { 
     $('.glyphicon', this).addClass('glyphicon-unchecked').removeClass('glyphicon-check'); 
     $('.active .glyphicon', this).removeClass('glyphicon-unchecked').addClass('glyphicon-check'); 
    } 
    $(document).on("click", '.btn-group', setIcons); 
    $('.btn-group').each(setIcons); 
</script>

diesem Geige https://jsfiddle.net/sdodvc3s/4/

EDIT Siehe: Sie in diesem Code, um die Radio-Button klickt für den Umgang mit einer ungewöhnlichen Konstrukt auffallen wird. Der Code dafür ist so ausgelegt, dass er Radio-Click-Events auf eine etwas agnostische Weise behandelt. Es könnte wie so in eine jQuery-Plugin abstrahiert werden:

$.fn.radioClick(function(callback) { 
    return this.each(function() { 
     if ($(this).closest('label').length > 0) { 
      $(this).closest('label').click(function() { 
       $(':radio', this).attr('checked', 'checked').each(callback); 
      }); 
     } else { 
      $(this).click(callback); 
     } 
    }); 
});

und verwendete dann unabhängig keine Radio-Buttons auf Ihrer Seite zu handhaben es Styling ist. Mit dem Plugin würde Ihr Code werden:

$('.categorias').radioClick(function() { 
    console.log("clicked: " + $(this)); 
    var endpoint = $(this).attr('id'); 
    getFromEndpoint(endpoint); 
}

Quelle

2016-12-14 23:50:05 B2K

Vielen Dank für Ihre sehr detaillierte Antwort. Obwohl es nicht so zu funktionieren scheint, wie es ist, ist dein ** "Du klickst eigentlich auf das Label in einem Buttonset, nicht auf die eigentlichen Elemente" ** Kommentar ließ mich daran denken, die 'categorias' Klasse auch auf die Labels zu setzen, welche machte es funktioniert – jmm

Diese Geige funktioniert. – B2K

Entschuldigung, ich habe mich nicht klar ausgedrückt: Ich habe nur den oberen Teil (nicht die ganze Geige) eingefügt und dann die Klasse den Labels hinzugefügt. Vielen Dank – jmm

Bootstrap und jQuery klicken Ereignis nicht funktioniert

Antwort

Verwandte Themen