jquery Troubles with binding to an element by id

Question

Hi What im trying to do is that when the esc key is pressed on the text input field (id = txtSearch), some code will run. this is my code:

$(document).ready(function() { 
           $('#txtSearch').bind('keyup', function(e) { 
                var characterCode; // literal character code will be stored in this variable 
                if (e && e.which) { //if which property of event object is supported (NN4) 
                    e = e; 
                    characterCode = e.which; 
                } 
                else { 
                    characterCode = e.keyCode; 
                } 
                if (characterCode == 27)  //if esc key
                { 
                    //do stuff 
                } 
            }); 
}

It doesnt work for me. however, if i would change that line:

$('#txtSearch').bind('keyup', function(e) {

with:

$(document).bind('keyup', function(e) {

everything works. but i dont want to bind the keyup with esc to the whole document... any suggestions on how i can bind the the keyup only with the specific text search element? (or its containing div or something) Thanks!

Answer 1

I think

$('input#txtSearch').bind('keyup', function(e) {

is the line you are looking for.

Kindness,

Dan

Answer 2

Make sure that your html has an element with id txtSearch.

If you are using ASP.NET, you'll have to change

$('#txtSearch').bind('keyup', function(e) {

to

$('#<%= txtSearch.ClientID %>').bind('keyup', function(e) {

so that jQuery gets the full generated id.

Answer 3

Hi guys

Thank you for your suggestions, i tried all 4 of them, neither worked... nice try... but im really stuck

any more ideas?

Thanks!

Answer 4

Do it thisway

            $(function(){ 
                    $('input').keydown(function(e){ 
                            if (e.keyCode == 13) { 
                                    $(this).parents('form').submit(); 
                                    return false; 
                            } 
                    }); 
            });

worked for me.

Answer 5

Or what about using :

$('input[id=txtSearch]').bind('keyup', function(e) {

Just a work-around.

Answer 6

Hi

i gave that up. i cant seem to find a way to attach this event only to a specific element of the DOM.

so, this is my work around:

$(document).keyup(function(e) {

    if (e.target.id == "txtSearch") {
        var characterCode; // literal character code will be stored in this variable
        if (e && e.which) { //if which property of event object is supported (NN4)
            e = e;
            characterCode = e.which; //character code is contained in NN4's which property
        }
        else {
            characterCode = e.keyCode; //character code is contained in IE's keyCode property
        }

        if (characterCode == 27)  //if generated character code is equal to ascii 27 (if esc key)
        {
           //do stuff
        }

    }
});

Answer 7

Either check $('#txtSearch').length in a debugger or type

javascript:alert($('#txtSearch').length);

into your address bar to make sure it's actually selecting an element. If not, you could try adding a css class to your textbox and using $('.txtSearch').