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

Question

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.

Closed 8 years ago.

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
            });

Answer 1

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.

Answer 2

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')