Question

I am trying to append new returned data to my select tag when user selects a drop down menu

obj.prototype.getText=function(){
    codes....
    call ajax....

             ajax.callback=function(data){
                   $('#option').append(data);
            }

        }

$('#dropdown').on('change', function(){
    obj.getText()
})

My problem is that I only want to append data when the user clicks the dropdown menu the first time.
my code will keep append more same data to my #option as long as user keeps clicking the drop down menu…

Are there anyways to fix this? Thanks a lot.

Answer 1

Use .one() instead of .on(). It unbinds itself once you trigger the event once:

$('#dropdown').one('change', obj.getText);