jQuery function running multiple times despite input being disabled?

Question

I'm having an issue where a function (and subsequent callback functions) continue to run after the first keypress, despite the fact that I'm specifically disabling the input and unbinding keypress. The weird thing is, these additional results only start appearing after a significant amount of time has passed (10+ seconds I would guess). You can see this error in action by going to http://isitsketch.com and mashing on the enter button while entering an address. The relevant code is this:

  $('.location-form').keypress(function(event){
    if (event.which == 13){
    $(this).find('input').attr('disabled','disabled');
        $(window).unbind("keypress")
        console.log('search entered')
        event.preventDefault();
        userAddress = $("#input1").val()
        address = userAddress.replace(/\s+/g, '+');
        getMaps(address)
        event.stopPropagation()
        return false;
    } else {
        return true;
      }
  });

The function that displays the results is this:

function displayResults(sketchLevel, robberies, assaults, burglaries, thefts, weapons, topFiveArr) {
  $('#newResults').append('<h4 id="feedback" style="color:white;text-align:center;">' + userAddress + '</h4>')
  $("<h2 id='result-level'>Sketch Level: <span class='redText'>"+ sketchLevel +"</span></h2>").appendTo("#newResults")
  $('<div id="indicator"><div id="bar"></div><div id="dial"></div></div>').appendTo("#newResults")
  $('<a id="tryAgain" class="waves-effect waves-light btn" href="http://isitsketch.com">Enter a New Address</a>').appendTo("#newResults")
  $('<p id="explanation">These results are based on NYC\'s OpenData information platform. The crimes have been weighted to reflect their severity. The resulting SketchLevel ranges from 0 (no crimes) to 2000+ (lots of severe crime activity).</p>').appendTo("#newResults")
  $('#newResults').append('<h4 id="topFive">Can you beat these scores?:</h4><ul id="topList"></ul>')
  for (i = 0; i < 5; i++){
    var currentTopArea = topFiveArr[i]['area']
    var currentTopRank = topFiveArr[i]['rank']
    $('#topList').append('<li style="color:white; font-size:1em;">' + currentTopArea + ': ' +'<span id="rankText">' + currentTopRank + '</span>' +'</li>')
  }
  var audio = new Audio('sound/gunsound.mp3')
  audio.play();

  if(sketchLevel <= 400) {
    $('#dial').addClass('sketchlevel1')
  }
    if(sketchLevel > 400 && sketchLevel <= 800) {
    $('#dial').addClass('sketchlevel2')
  }
    if(sketchLevel > 800 && sketchLevel <= 1400){
    $('#dial').addClass('sketchlevel3')
  }
    if(sketchLevel > 1500 && sketchLevel <= 2000) {
    $('#dial').addClass('sketchlevel4')
  }
  if(sketchLevel > 2000) {
    $('#dial').addClass('sketchlevel5')
  }
}

Answer 1

Since the keypress event handler is bound to .location-form , you need to unbind it from that element, not window . So it should be:

$('.location-form').unbind("keypress");

Also, .off() is preferable to .unbind() , unless you need to be compatible with jQuery versions before 1.7.

Answer 2

I figured out how to stop it, although I still don't know why it was occurring in the first place. The fix was this:

var enabled = true;
displayResults(){
 if (enabled) {
  ...the rest of the code here
  enabled = false;
 }
}

That said, it would be awesome if somebody else could figure out how/why it was getting around the input-disabled line and then continuing to post every 10 seconds or so. Just so weird.