Facebox Dialog boxes - jQuery selectors modify input fields, but no event triggers work

Question

I cannot get a .change(), .click(), or .keydown() trigger to work in any browser on my facebox form.

-- EDIT --- The problem is that facebox CLONES html to display it in the dialog box element. Because of this, jquery selectors work, but event triggers do not (based on the duplicate). The fix is to modify facebox and remove the .clone() behavior.

-- END EDIT --

The following works on document ready:

$('input#testE').css('background-color', 'red');

where #testE is a text input. On load the textbox background is red. however...

$('input#testE').keydown(function() { 
    $('input#testE').css('background-color', 'red');
});

does not trigger. I've also tried .change(), and .click(). Neither will it print to console for testing. My code works fine in jsFiddle, but will not work in my environment. Any thoughts on this?

edit....

to clarify on the document ready issue:

    $(document).ready(function() { //on document load

        console.log('test'); // this works

        $('input#testE').keydown(function() { //won't fire
            $('input#testE').css('background-color', 'red');
        });


                   $('input#testE').css('background-color', 'blue'); //works
            });

If the code you have there works in a JSFiddle, but doesn't work in your own document, then the problem almost certainly lies somewhere else in your code. We can't tell where because we can't see the rest of the code. You need to create a reduced test case that actually demonstrates the problem. — Quentin, May 06 '13 at 18:53
Chances are there's an error somewhere else in your code (perhaps earlier in the `document.ready` function) that's causing your event binding code not to run. — Matt Browne, May 06 '13 at 18:55
I have other jQuery working on the page. And the code is in document ready. Seems to me that the first of the two examples wouldn't have worked if jQuery library wasn't connected? Also - no errors and am running a console.log() on document ready just to make sure it's reading. — AshBrad, May 06 '13 at 18:57
Which element has the focus when you're running your script and trying the keydown event? Make sure you're focus on the input#testE element — Lior Elrom, May 06 '13 at 18:59
@Zenith - yes, but everything works in jsFiddle... would that still be helpful? — AshBrad, May 06 '13 at 19:02
After you edited to add more code, it [still just works](http://jsbin.com/otutib/1/edit). As I said before - you need to create a **complete**, reduced test case that actually *demonstrates the problem*. — Quentin, May 06 '13 at 19:02
@zenith - thank you. I'll work on that. console.log works before and after the function - is that significant? — AshBrad, May 06 '13 at 19:08
@AshBrad Yep, that means that unlike what some people are saying, the problem isn't to do with conflicts/scripts etc. - just this particular function — dsgriffin, May 06 '13 at 19:11
"console.log works before and after the function" possibly eliminates a conflict at the time the event handler is attached, but certainly not at the time it fires. — Beetroot-Beetroot, May 06 '13 at 19:22
I'm totally stumped. Would it help to see the live page? @Beetroot-Beetroot - thanks for that clarification. — AshBrad, May 06 '13 at 19:24
@AshBrad You seem to be using a click() in your website instead of keydown() — dsgriffin, May 06 '13 at 19:38
Simplified fiddle works. The element turns red when you start to type, but not on click. — Beetroot-Beetroot, May 06 '13 at 19:43
@MichaelAguilar - thanks. That was just an experiment as well. I'm really trying everything here. I've moved it back. Thanks for the note though. — AshBrad, May 06 '13 at 20:05
Now i know what is the problem, you have two inputs with the id TestE, and the event is only applied to the first. Never duplicate Ids — Michael Aguilar, May 06 '13 at 20:21
@MichaelAguilar - I just scanned the source and only see one testE ID on line 195. Where are you seeing others? Also - changed the name of the id as a test with no difference. Further, seems the initial declaration 'background', 'yellow' - wouldn't work if there was an ID confusion. — AshBrad, May 06 '13 at 20:27
the first id appaers when the page is loaded inside "wrapper", the second is loaded when i click in "Request an account" inside "facebox". In others word, when I click in the "Request an account" is loading another TestE — Michael Aguilar, May 06 '13 at 20:34
@MichaelAguilar - thanks! this was a key observation. I'd give you a solved remark if I could on this comment! — AshBrad, May 06 '13 at 20:49
So strange this question receives so many down-votes. I actually solved the problem BECAUSE the stack overflow community answered. It was a tremendous help. — AshBrad, Jul 13 '13 at 02:03
How is it this has been accused of not being a question when the question has in fact been answered?! — AshBrad, Sep 05 '13 at 07:12

score 2 · Accepted Answer · answered May 06 '13 at 19:42

2

When you click the "Request an Account" button, you make a copy of a form that already exists in the document and display it.

When you copy the form, you take its current inline style (the yellow colour) with it, but you don't take the event handler.

If you change #req_acct to display: block, you can see the original form and see the colour change.

answered May 06 '13 at 19:42

Quentin

914,110
126
1,211
1,335

Very interesting! In facebox.js it's cloning the form! I'll change this and see if it fixes. Thanks! – AshBrad May 06 '13 at 20:35
This is going to require some updating of some scripts - but you've solved the problem! Very nice and thank you! I'll have to prevent .clone() in the specific case of this form. – AshBrad May 06 '13 at 20:49

writeToBhuwan · Answer 2 · 2013-05-07T00:28:20.867

-1

I doubt that you are not clicking on the element you actually want to.. This may be due to some css you have on your page which is overlapping two different elements.(absolute positioning or something else, I don't know much about CSS)

You can check that using the method below:

$('*').click(function(){
    console.log($(this).prop('id'));
});

And click on your textbox, And see if the ID you are getting is correct. If jquery is loaded(As you've proved), This should definitely work.!

EDIT:

If .prop is not working, you probably have the older version of Jquery. You need to use attr in place of prop. So please replace

$(this).prop('id')

with

$(this).attr('id')

edited May 07 '13 at 00:28

answered May 06 '13 at 19:03

writeToBhuwan

3,233
11
39
67

He's already said `$('input#testE').css('background-color', 'blue');` works though.. – dsgriffin May 06 '13 at 19:04
@Zenith - that's right. – AshBrad May 06 '13 at 19:04
The chances of `$` being overwritten after `ready` fires but before the key is pressed are really slim. – Quentin May 06 '13 at 19:05
@writeToBhuwan just tried this. The above .click() method isn't working either... could that be a hint as to what's wrong? – AshBrad May 06 '13 at 20:07
@writeToBhuwan - moved function outside of doc ready and it fired but created the following error: Uncaught TypeError: Object # – AshBrad May 06 '13 at 20:08

Facebox Dialog boxes - jQuery selectors modify input fields, but no event triggers work

2 Answers2