Bootstrap onClick button event

Question

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.

Do you mind also including the html code for your button please? — surj, Aug 22 '12 at 21:28

score 53 · Accepted Answer · answered Aug 22 '12 at 21:34

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.

answered Aug 22 '12 at 21:34

moonwave99

21,957
3
43
64

Still not working.. I have this button: inside a btn-group and the code is $('#rectButton').on('click', function (e) { // MY CODE }); – JuanCB Aug 22 '12 at 22:14
2

Just copying your latest code, perfectly working [here](http://jsfiddle.net/JUfBv/). Anyway bootstrap is just about presentation, nothing to to with js [besides some little optional plugin]. – moonwave99 Aug 22 '12 at 22:20
not working to me... I don't know what I'm missing... Do I have to include something else? – JuanCB Aug 23 '12 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 Aug 23 '12 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... – DPSSpatial Oct 04 '13 at 22:38
For bootstrap 3 i used this `function runWorkflow() {//code}` with `` – Zach M. Feb 10 '14 at 21:29
@ZachM. don't use intrusive JS - anyways bootstrap has no interaction with buttons/forms whatsoever. – moonwave99 Feb 10 '14 at 22:16
Ah yes, I see your point. The application I am developing is for internal use and was just throwing out an idea, you are right though. – Zach M. Feb 11 '14 at 14:06

score 1 · Answer 2 · answered Nov 24 '19 at 10:27

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.

Thanks for the `$(document).on("click` hint, that the above example does not work in future elements — leole, Apr 15 '21 at 07:19

Bootstrap onClick button event

2 Answers2

Linked

Related