2

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.

Kurt Mueller
  • 3,173
  • 2
  • 29
  • 50
  • Works fine for me: http://jsfiddle.net/67Ec5/ (well, `click` didn't work, so I used `focus`). So if it doesn't work, then your are not passing the right value as data argument (or none at all). – Felix Kling Jan 28 '14 at 22:22
  • why not do something like this: $( document ).on( "click", "form select", selectFunction({ foo: 'bar' }); – kasper Taeymans Jan 28 '14 at 22:22
  • @kasperTaeymans: And how would `selectFunction` look like then? – Felix Kling Jan 28 '14 at 22:23
  • 1
    `click` works here: http://jsfiddle.net/649Nd/ (just click within the red area) – acdcjunior Jan 28 '14 at 22:23
  • function selectFunction( event, data ){alert(data.foo)} If this is not an option you need to create a custom event. see this link http://stackoverflow.com/questions/7057223/firing-and-capturing-custom-events – kasper Taeymans Jan 28 '14 at 22:25
  • @kasperTaeymans: That wouldn't work. You are calling `selectFunction` immediately, so the object you pass in would be accessible via the `event` variable, not `data`. Then you are passing the *return value* of that function call to `.on`, which is `undefined`. If you wanted it to work like in your first comment, then the function would have to look like `function selectFunction(data) { return function(event) { ... }; }`. In any case, there is nothing obvious wrong with the OP's code, so the problem is somewhere else. – Felix Kling Jan 28 '14 at 22:27
  • yes must be function(event){selectFunction({foo:"bar"})}; – kasper Taeymans Jan 28 '14 at 22:29
  • @kasper, I tried your first suggestion and Chrome's console will spit out the following error at me: `Uncaught TypeError: Object # has no method 'apply'`. – Kurt Mueller Jan 28 '14 at 22:32
  • @acdcjunior Yours answer (and the one that I wanted) worked for me. It's weird because in my `selectFunction`, `console.log event` will show `null` in its data field. However, `console.log event.data` will show the object literal `{ foo: 'bar' }`. I suspect it has something to do with the asynchronous nature of javascript, but I don't know what exactly yet. – Kurt Mueller Jan 28 '14 at 22:35
  • And thank you everybody for your help, I really appreciate it. – Kurt Mueller Jan 28 '14 at 22:36
  • Hum. Weird indeed. Try `console.dir(event)` some other time, maybe it will show it. – acdcjunior Jan 28 '14 at 22:40

1 Answers1

3

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.

Gjohn
  • 1,261
  • 1
  • 8
  • 12
  • This works for me. It's weird because in the `handler function`, `console.log event` will show null in its data field. However, `console.log event.data` will show the object literal `{ foo: 'bar' }`. I suspect it has something to do with the asynchronous nature of javascript. However, I don't know exactly why this occurs. – Kurt Mueller Jan 28 '14 at 22:37