Question

I’m using bootstrap for my new site. I would like to use the button plugin. Instead of adding the jquery.trigger code into bootstrap-button.js, is there a current best practice to get an alert to show when the button is clicked?

bootstrap-button.js:

  Button.prototype.toggle = function () {
    var $parent = this.$element.parent('[data-toggle="buttons-radio"]')

    $parent && $parent
      .find('.active')
      .removeClass('active')


    this.$element.toggleClass('active')

      this.$element.trigger('button-change') //added code

  }

Answer 1

By editing the Bootstrap plugins directly, it not only eliminates the possibility to use a CDN, but it also complicates upgrading to future releases. For that reason, it is usually best practice to implement additional behavior without such alterations. Many of the Twitter Bootstrap plugins provide a variety of events to enable this practice. In those plugins which do not trigger events, the addition of such events is arguably unnecessary.

In this particular case, the Button plugin does not alter the click event (no preventDefault() or stopPropagation() calls are made), so one would be fine just attaching additional listeners to the click event itself.

For example:

$('body').on('click.myListener', '[data-toggle=^button]', function (e) {
  // do something
  console.log(e.target); // originating button
});