Need to bind onclick event on drawer button

Question

I am working with material design lite in my project and I need to attach a function to the click event of the drawer button. I thought it was trivial, so I added this code:

$(document).ready(function(){ 
    $('.mdl-layout__drawer-button).on('click', function(){
       console.log('click');
});

but then I discovered that the drawer button is added by mdl.js as the very last element after document.ready, so when I run my code, the button is not yet ready.

Any idea on how to get the selector when it is ready?

Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — freedomn-m, Nov 21 '17 at 09:15

score 2 · Accepted Answer · answered Nov 21 '17 at 09:14

2

You need delegation : https://learn.jquery.com/events/event-delegation/

$(document.body).on('click', '.mdl-layout__drawer-button', function(){
  console.log('click');
});

answered Nov 21 '17 at 09:14

Vasiliy vvscode Vanchuk

7,007
2
21
44

Thanks Vasily! It was really trivial... :-) – Fabio Marzocca Nov 21 '17 at 09:18

Need to bind onclick event on drawer button

1 Answers1