execute keyup once

Question

I'm trying to load a gif loader when I start to type in a textbox. I'm appending it to the div that contains the textbox on keyup. The problem I have is that the loader is appended every time I type a letter while I would like to append it only once when I type the first letter.

function loader(){

    $('#contrib_search').bind('keyup', function(){
        $('#contrib_text').append('<div id="loader"></div>');
    });
}

Any idea how to do this?
Thanks

Answer 1

Using 'one' could help:

function loader() {
  $('#contrib_search').one('keyup', function () {
    $('#contrib_text').append('<div id="loader"></div>');
  });
}

Answer 2

you can unbind the keyup after you add the loader

function loader(){

    $('#contrib_search').bind('keyup', function(){
        $('#contrib_text').append('<div id="loader"></div>');
        $('#contrib_search').unbind('keyup');  //or $(this).unbind probably a tad faster
    });
}