21

This seems a silly question but just got bootstrap and it doesn't gives any examples on the website about adding a Javascript callback to a button...

Tried setting my button an id flag and then

<div class="btn-group">
  <button id="rectButton" class="btn">Rectangle</button>
  <button class="btn">Circle</button>
  <button class="btn">Triangle</button>
  <button class="btn">Line</button>
  <button class="btn">Curve</button>
  <button class="btn">Pic</button>
  <button class="btn">Text</button>
  <button class="btn">Gradient</button>
</div>

I want to add a callback to Rectangle button...

$('#rectButton').on('show', function (e) {
    //ACTION
})

cant get the point of bootstrap callbacks.

All I could found on the web is oriented to Rails + Bootstrap... no bootstrap and JS only.

1
  • Do you mind also including the html code for your button please?
    – surj
    Commented Aug 22, 2012 at 21:28

2 Answers 2

53

There is no show event in js - you need to bind your button either to the click event:

$('#id').on('click', function (e) {

     //your awesome code here

})

Mind that if your button is inside a form, you may prefer to bind the whole form to the submit event.

8
  • Still not working.. I have this button: <button id="rectButton" class="btn">Rectangle</button> inside a btn-group and the code is $('#rectButton').on('click', function (e) { // MY CODE });
    – JuanCB
    Commented Aug 22, 2012 at 22:14
  • 2
    Just copying your latest code, perfectly working here. Anyway bootstrap is just about presentation, nothing to to with js [besides some little optional plugin].
    – moonwave99
    Commented Aug 22, 2012 at 22:20
  • not working to me... I don't know what I'm missing... Do I have to include something else?
    – JuanCB
    Commented Aug 23, 2012 at 21:35
  • Well the fiddle just includes jQuery - if your code includes it too, please edit your question with the whole code so we can guess.
    – moonwave99
    Commented Aug 23, 2012 at 23:09
  • I can't get this to work with bootstrap 3.0.0 ... @JuanCB what do you mean by including jquery solved the problem? I've tried to use exactly what is in that jfiddle, but no luck... Commented Oct 4, 2013 at 22:38
1

If, like me, you had dynamically created buttons on your page, the

$("#your-bs-button's-id").on("click", function(event) {
                       or
$(".your-bs-button's-class").on("click", function(event) {

methods won't work because they only work on current elements (not future elements). Instead you need to reference a parent item that existed at the initial loading of the web page.

$(document).on("click", "#your-bs-button's-id", function(event) {
                       or more generally
$("#pre-existing-element-id").on("click", ".your-bs-button's-class", function(event) {

There are many other references to this issue on stack overflow here and here.

1
  • Thanks for the $(document).on("click hint, that the above example does not work in future elements
    – leole
    Commented Apr 15, 2021 at 7:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.