CODEWITHSUNDEEP
jquerytwitter-bootstrap
Crashdesk
Crashdesk

Reputation: 665

Twitter Bootstrap Jquery code for collapse

I was hoping someone could explain what is happening i the following code taken from Twitter Bootstrap...

$(function () {
    $('body').on('click.collapse.data-api', '[data-toggle=collapse]', function ( e ) {
      var $this = $(this), href
        , target = $this.attr('data-target')
          || e.preventDefault()
          || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7
        , option = $(target).data('collapse') ? 'toggle' : $this.data()
      $(target).collapse(option)
    })
  })

I use 'on' click with jquery but never with the dot notation after 'click' and never with the []

Thanks for any help in figuring out what is happening.

Upvotes: 0

Views: 1532

Answers (1)

Sherbrow
Sherbrow

Reputation: 17379

The dot notation is a namespace.

$('#myElt').on('click.mynamespace',someFunction); // listening
$('#myElt').off('click.mynamespace'); // not listening any more

It allows you for example to easily remove all event listeners from one namespace only.

jQuery documentation.

The second argument is a selector for all elements that have a data-toggle attribute equal to collapse. W3C doc & jQuery doc

Here is an example of its use

$('#myContainer').on('click','.child',someFunction);

If I'm not mistaken, it means that any click event going to a .child element will be intercepted by this listener, whether the .child element was created at the time of the binding or not. And the someFunction callback will be called.

jQuery documentation.

Upvotes: 3

Related Questions