Question

For the modal code inside the twitter bootstrap.js plugin, I see this:

e = $.Event('show')
this.$element.trigger(e)

Why don’t they just do $.element.show()?

Why is the jQuery Event constructor being used?

Here is the show method from the source:

show: function () {
   var that = this
      , e = $.Event('show')

    this.$element.trigger(e)

    if (this.isShown || e.isDefaultPrevented()) return

    $('body').addClass('modal-open')

    this.isShown = true

    escape.call(this)
    backdrop.call(this, function () {
      var transition = $.support.transition && that.$element.hasClass('fade')

      if (!that.$element.parent().length) {
        that.$element.appendTo(document.body) //don't move modals dom position
      }

      that.$element.show()

      if (transition) {
         that.$element[0].offsetWidth // force reflow
      }

      that.$element.addClass('in')

      transition ?
        that.$element.one($.support.transition.end, function () { that.$element.trigger('shown') }) :
        that.$element.trigger('shown')

    })
  }

Could someone explain this to me clearly?

Answer 1

That’s Because it’s giving us the opportunity to react to the event.

thanks to this, if you want react when modal its going to open you only should add an event listener:

$("#myModal").on("show", function () {
    console.log("Do stuff on 'show'");
});

Just to be clear. they created an event called “show” but can be any name since its used only for that plugin. Even if they had called “showme-the-money” you shoud only listen that event:

$("#myModal").on("showme-the-money", function () {
    console.log("Sorry i'm poor :(");
});