JavaScript .on("keyup")

Question

There's an input text fires a function on "onkeyup" event. When that function fires I'm binding a "keyup" event with .on("keyup") method to get the last pressed key to find out if it was alphanumerical in order to fire the search ajax I want. And after I finish, I unbind the connection with .off("keyup") method.

But there's a problem with the unbindation. The problem is; My code runs once and doesn't run for a turn, then runs again and doesn't run for the other turn and keeps it going like that. I replaced the code I want to simplify it to test.

$("#arama").on("keyup",function(event) {
      console.log("asd");
      $("#arama").off("keyup");
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="arama" />

Where am I mistaken ?

P.S: I've solved it thanks to Chris.

Chris Thorsvik · Accepted Answer · 2017-04-15T15:23:29.157

1

Your code works for me (see below). Maybe check where you are binding your keyup event. It should be bound once when the document loads before the page shows. If you bind it multiple times (i.e. if the code that contains your keyup function runs more than once) you will run into problems.

$("#arama").on("keyup", function(event) {
  var i = event.keyCode;
  if ((i >= 48 && i <= 57) || (i >= 96 && i <= 105)) {
    $("#arama").off("keyup");
    console.log("Number pressed. Stopping...");
  } else {
    console.log("Non-number pressed.");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="arama" />

edited Apr 15 '17 at 15:23

answered Apr 15 '17 at 15:10

Chris Thorsvik

450
7
15

Quite weird, your code runs the log for once even though I've written multiple times http://i.hizliresim.com/JazolQ.png – Ümit Aparı Apr 15 '17 at 15:16
That's because it is unbinding the `keyup` event after it has fired once. You can set a condition on the `.off("keyup")` command to control when it stops running the parent function. – Chris Thorsvik Apr 15 '17 at 15:18
It seems like you misunderstood me. See these 2 pics http://i.hizliresim.com/nRN8da.png http://i.hizliresim.com/GB48Av.png On first picture i've written 3 chars and it didn't logged the 3rd character, On the second picture I've written 4 chars and since it logs in every twice char It logged 3rd and 4th characters log at once. And I'm looking if it's alphanumerical not just numerical It's for beeing sure that it's not ctrl,alt or smth – Ümit Aparı Apr 15 '17 at 15:38
And yes I'm binding it everytime input text's onkeyup event fires, I think that's where I'm mistaken. But what do I do about it – Ümit Aparı Apr 15 '17 at 15:44
Well, I would bind it once for all `keyup` events. I don't see a reason to ever unbind your function. If you don't want the function to do something when some condition has been met, just keep track of it with a boolean. – Chris Thorsvik Apr 15 '17 at 15:46
Oh, now I've managed to do it. Thanks for helping, I think I need to study about JQuery a little more :D btw I do live in Istanbul too, where do you live in exactly – Ümit Aparı Apr 15 '17 at 15:51
Look me up on Facebook or Google and we can talk there. ;) – Chris Thorsvik Apr 15 '17 at 16:00

score 0 · Answer 2 · answered Apr 15 '17 at 15:21

0

No need to unbind the event. Try this

$("#arama").on("keyup",function(event) {
    console.log("asd");
});

answered Apr 15 '17 at 15:21

Zohra Gadiwala

206
1
4
17

I actually have to unbind it since I declare it multiple times when the parent function fires everytime I press a key on the input text. If I don't unbind it, it will keep binding over and over and fire the code multiple times. – Ümit Aparı Apr 15 '17 at 15:24

JavaScript .on("keyup")

2 Answers2