CODEWITHSUNDEEP
javascriptjquery
gandalf3
gandalf3

Reputation: 1666

Pass function to a jquery key event?

I have a function foo(peram) which I want to call from multiple jquery .keyup() events.

How can I define/pass function foo so that I can call it from inside the event?

I tried something like this:

function foo(peram) {
alert(peram);
}

$("#someElement").keyup(function(alert) {
foo("You pressed a key!");
});

However I get TypeError: foo is not a function.

Update:

I have removed everything from my script and html, and it still does not work.

html:

<html>
  <head>
    <script src="../jquery-1.10.2.js" type="text/javascript"></script>
    <script src="test.js" type="text/javascript"></script>
  </head>
  <body onload="asdf()">
      <input type="text" name="name">
  </body>
</html>

test.js:

function asdf() {

function hqxftg(stuff) {
  alert(stuff);
}

$(document).ready(function() {
$('[name="name"]').keyup(function(hqxftg) {
  alert(typeof hqxftg) 
    hqxftg("asdf");
})
})
}

It does seem to work in jsfiddle for some reason.

Upvotes: 0

Views: 1031

Answers (3)

Arun P Johny
Arun P Johny

Reputation: 388336

It is because you have named the event parameter same as the function

function asdf() {

    function hqxftg(stuff) {
        alert(stuff);
    }

    $(document).ready(function () {
        $('[name="name"]').keyup(function (event) {
            alert(typeof hqxftg)
            hqxftg("asdf");
        })
    })
}

The event callback keyup receives the event object as the first parameter, you are naming it as hqxftg which overrides the external scoped function name.

Also there is no need to use the onload="", you can just use the dom ready callback

jQuery(function ($) {
    function hqxftg(stuff) {
        alert(stuff);
    }
    $('[name="name"]').keyup(function (event) {
        alert(typeof hqxftg)
        hqxftg("asdf");
    })
})

Upvotes: 2

Arun Chandran Chackachattil
Arun Chandran Chackachattil

Reputation: 3362

Try this code. HTML

<input id="someElement" />

Java script:

function foo(peram) {
alert(peram);
}
$( document ).ready(function() {
    $("#someElement").keyup(function() {
       foo("You pressed a key!");
     });
});

Demo

Upvotes: 0

pazcal
pazcal

Reputation: 938

You are missing a couple of things...

1) You miss the ; at the end of calling foo()

2) You are missing tags to close the jQuery selector

When you try this it will work:

function foo(peram) {
  alert(peram);
}

$("#someElement").keyup(function(alert) {
  foo("You pressed a key!");
});

JSFiddle here...

Update: Post has been updated and original comment of mine becomes obsolete. I would go with the comment of Derek.

I am able to reproduce the problem: JSFiddle

Is it correct you have also foo declared as a var?

Upvotes: 1

Related Questions