javascript - Materialize CSS - passing data to sideNav -

i'm using materializecss latest project , have problem.

i use sidenav open 'modal' inside of contact form.

this contact form should used in multiple occasions , different informations should prefilled depending on button user click.

let me explain in example:

if user clicks on send message forms input title should like

<input type='text' id='title' name='title' readonly value="general message"> 

and if user clicks on button request candy input should like

<input type='text' id='title' name='title' readonly value="i want candies!"> 

since sidenav opens clicking on element of type

<a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a> 

i had idea react on click as

$(document).on('click', '.button-collapse', function() {     console.log('got it!');     $('#title').val('my custom message data-* or something..'); }) 

but doesn't work since materialize hijacks click events on these a.button-collapse's. don't console log got it!.

does know way pass data newly open sidenav?

update:

jsfiddle

<input> "head only" tag - has no closing </input> , yet element has no content.

so markup shall like

<input type='text' id='title' name='title' value='general message' readonly></input> 

update:

change this:

$('.button-collapse').on('click', function() {     $('#title').val($(this).data('title'));     console.log('i have been clicked');   }) 

and work. seems document or framework consuming event cannot handle on level.