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.

zerkms · Accepted Answer · 2012-06-20 04:47:17Z

4

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

answered Jun 20, 2012 at 4:47

zerkms

256k73 gold badges447 silver badges551 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Mr A Over a year ago

if the name of my toggle is not modal, does the fomrat for the event changes? like click.myfunc.data-api ? Also, should I put this on my .ready?

zerkms Over a year ago

@Mr A: [data-toggle="modal"] -- this is a generic selector, means "all elements that have parameter data-toggle equal to modal". So you can use everything as a parameter name and everything for parameter value

zerkms Over a year ago

click.modal.data-api - is just a click event

zerkms Over a year ago

Yep, you need to put it in $(function() {});

Mr A Over a year ago

Can I just go with a click event and or should I be specific with click.modal.data-api?

|

Collectives™ on Stack Overflow

JQuery: Using data attribute to affix a function

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related