adding a click event

  • 1
  • Question
  • Updated 5 years ago
  • (Edited)
As part of an ongoing effort to add some events to SKUID forms I had the idea that I could trap the click event using jquery

so i put this in "inline" javascript

skuid.$( "input" ).click(function() {  alert( "Handler for .click() called." );
});

but this doesn't give any message when I click on inputs

I must be missing something

Thanks
Photo of ktyler

ktyler

  • 9,244 Points 5k badge 2x thumb

Posted 5 years ago

  • 1
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,490 Points 10k badge 2x thumb
My guess is that the input elements don't exist at the time your selecter is run.  I would use jquery's "on" functionality instead and put the event handler on the page.

skuid.$( ".nx-page" ).on('click','input',function() {  
    alert( "Handler for .click() called." );
});

Photo of ktyler

ktyler

  • 9,244 Points 5k badge 2x thumb
Ben,
Thanks, that worked.
When I look at the DOM I see only "<input>" for input fields... so I assume SKUID is doing some magic to create the actual input
What I'm trying to do is find a way to add click, blur and change events they way I could if I were in more control of the HTML. I know there are Model events I can get... but I'd like to get them at the DOM level because some events there that are meaningful for UI design don't ever get to the model.
I suspect I would have to create my own custom component to do this. Is there a way I could create a custom component to create an input field that wrapped the SKUID input field and allowed me to add javascript for those 3 events ?