How come when I write a click() event where the input field (created by the jquery ui combobox widget) is in scope of the selector the event never fires?
I have a form that has a validation which highlights the entire parent <div> of that form field using the css class 'reqFieldGroupEmpty' when the end-user doesn't fill it out correctly.
When a user clicks inside the missed required field I have a click() event remove that class of that form field's parent <div>
$('input, textarea, select').click(function () { $('div').removeClass('reqFieldGroupEmpty') });
However, as I mentioned at the start, the combobox-created <input> isn't triggering the click(), thus not removing the class.
Also, I've been using firebug with a console.log("I've been clicked") message with the click() event function and it does get executed with all of the other inputs in the jQuery selector, just not the ones created by the widget? I've even tried going right to the heart of that input using $('input[role="textbox"].ui-autocomplete-input').click(function () { console.log("I've been clicked") }); and that doesn't work either
It's almost like since the input element was created by the widget it's not getting any of the event handler's bound to it? Is there a way to forcibly bind events to elements if they were created from a script? I should mention I haven't had any luck with live() or on() but I could be implementing them incorrectly. I'm just jQuery 1.7.2.
What am I missing? Thoughts?
Thank you for helping!