jquery run functions

Question

I have a function in jquery:

$('#map').click(function(e) {
    var posX = $(this).offset().left, posY = $(this).offset().top;
    if (posY < 100) {
       // do this

When the user clicks within that element it will run. But I also want it to run if he presses a cursor key.

Is it possible to do something like:

$('#map').click OR key.press(function(e) {

Basically, can you set more than one event to run that function? Just learning jquery so go easy on me.

UPDATE

function move(e) {
   var posX = $(this).offset().left, posY = $(this).offset().top;

    if (posX > 75 && posX < 150 && posY < 75) { var go = "N"; }
    if (e.which == 38) { var go = "N"; }

    $.post("inc_map.php", { move: go }, function(data){ 
        var substr = data.split('@'); 
        if (substr[0] != "block") {
            var x1 = substr[0]; var y1 = substr[1];
            x = parseInt(x1) * 32; y = parseInt(y1) * 32;
            $("#mapview").css({ backgroundPosition: -x + "px " + -y + "px" });
                $("#map").html(substr[2]);
                $("#info").html(substr[3]);
                };
            $("#pos").html((x/32) + ', ' + (y/32)); 
        });  

};



$("#map").click(move).keypress(move);

Why doesnt this work? :o

possible duplicate of [How to invoke same code using multiple events?](http://stackoverflow.com/questions/6332804/how-to-invoke-same-code-using-multiple-events) — Felix Kling, Apr 06 '12 at 23:39
and [Binding a single event handler to multiple events with jQuery](http://stackoverflow.com/questions/4710219/binding-a-single-event-handler-to-multiple-events-with-jquery) and [multiple others](http://stackoverflow.com/search?q=jquery+same+event+handler+multiple+events)... please use the search before you ask a new question. — Felix Kling, Apr 06 '12 at 23:45

Elliot Bonneville · Accepted Answer · 2012-04-07T00:07:59.850

2

You'd define a function outside of the event handlers, then call it from each handler separately.

function myFunc(e) {
    var posX = $(this).offset().left, posY = $(this).offset().top;
    if (posY < 100) {

    }

    // if e.which equals 38, the up arrow was pressed
    if(e.which == 38) {
        // do nice stuff here
    }

    // the rest of your function here...
}

$("#map").click(myFunc).keypress(myFunc);

Edit: Threw in jQuery function chaining, too.

Aha, okay. I think I found your error. I've reformatted your code a bit and neatened it up some. Try this:

function move(e) {
    var posX = $(this).offset().left,
    var posY = $(this).offset().top;

    var go = "";

    if (posX > 75 && posX < 150 && posY < 75) {
        go = "N";
    }

    if (e.which == 38) {
        go = "N";
    }

    $.post("inc_map.php", {
        move: go
    }, function(data) {
        var substr = data.split('@');
        if (substr[0] != "block") {
            var x1 = substr[0];
            var y1 = substr[1];
            x = parseInt(x1) * 32;
            y = parseInt(y1) * 32;
            $("#mapview").css({
                backgroundPosition: -x + "px " + -y + "px"
            });
            $("#map").html(substr[2]);
            $("#info").html(substr[3]);
        };
        $("#pos").html((x / 32) + ', ' + (y / 32));
    });

};

edited Apr 07 '12 at 00:07

answered Apr 06 '12 at 23:36

Elliot Bonneville

51,872
23
96
123

Not quite correct. Just pass `myFunc` alone, without the `(e)`. – Niet the Dark Absol Apr 06 '12 at 23:37
how can I do it for say, the UP cursor is pressed? Can't make sense of the keypress doc :o – user1022585 Apr 06 '12 at 23:44
@user1022585: Edited to account. If you go here (http://api.jquery.com/keydown/) then scroll down until you see an text box, you can type a key in that box to see what its number equivalent is. The up arrow is equivalent to 38. – Elliot Bonneville Apr 06 '12 at 23:47
@user1022585: This should get you started: [jQuery Event Keypress: Which key was pressed?](http://stackoverflow.com/questions/302122/jquery-event-keypress-which-key-was-pressed) – Felix Kling Apr 06 '12 at 23:47
thank you, i've tried all that, and worked it in, can't get it running but I've probably got some rookie error. Updated post to show my code. – user1022585 Apr 07 '12 at 00:04
@user1022585: I've updated my answer, check out the code I posted. – Elliot Bonneville Apr 07 '12 at 00:06

score 0 · Answer 2 · answered Apr 06 '12 at 23:39

0

use jQuery.bind().

You can pass a space-separated list to .bind() for multiple events, eg

$("#map").bind("click keypress", myFunc);

answered Apr 06 '12 at 23:39

Faris M

540
4
10

Starx · Answer 3 · 2012-04-07T00:10:37.753

0

Pass a common event handler between clicks and keypresses

For example:

function myFunc(e) {
   //For cursor
   switch(e.charCode) {
      case 37: 
         // Left
      break;
      case 37: 
         // Up
      break;
      case 37: 
         // Right
      break;
      case 37: 
         // Down
      break;
   }
}

$("#map").click(myfunc).keypress(myfunc);

edited Apr 07 '12 at 00:10

answered Apr 06 '12 at 23:48

Starx

77,474
47
185
261

What's the difference to [@Elliot's answer](http://stackoverflow.com/a/10050406/218196)? – Felix Kling Apr 06 '12 at 23:51
@ElliotBonneville, Very funny I almost LOLed ;) – Starx Apr 07 '12 at 00:11

jquery run functions

UPDATE

3 Answers3