Kurt Mueller
Kurt Mueller

Reputation: 3224

Jquery `on` event handler: event delegation and passing custom data

I have a form that gets loaded through an ajax call, which means I need to use event delegation in order to detect when a select box in the form gets clicked.

My code looks like the following snippet below:

$( document ).on( "click", "form select", selectFunction );

However, in addition to utilizing event delegation, I'd also like to be able to pass custom event.data to the on handler function.

So, I'd like to have my code snippet look like below...

$( document ).on( "click", "form select", { foo: 'bar' }, selectFunction );

...and my handler function would act like something like this.

function selectFunction( event ) {
    console.log(event.data.foo); // outputs 'bar'
}

Unfortunately, event.data returns undefined.

Thank you for any and all help.

Upvotes: 2

Views: 1043

Answers (1)

Gjohn
Gjohn

Reputation: 1281

http://jsfiddle.net/2mMbT/6/

This works -

$(document).on("click","#form-select", {foo: "bar"},SubmitForm);

function SubmitForm(event)
{ 
   alert(event.data.foo); 
}

I think the issue is in the selector you are using - "Form select" or something else entirely.

Upvotes: 3

Related Questions