JQuery: Using data attribute to affix a function

Question

Quick Question

I notice this in bootstrap that it was manage to use the right function by using the data attribute. Like in dropdowns, you can use data-toggle to initiate it. I would like to know how this works. This might save me time to declare each of them in .ready or .load

Thanks.

Answer 1

It works absolutely the same as any other selector (the code from bootstrap modal):

$('body').on('click.modal.data-api', '[data-toggle="modal"]', function ( e ) {
    // show modal
});

This bind means: for all elements under body that fit [data-toggle="modal"] selector handle the click event by specified callback function