javascript - Why is my .change() function inside jquery plugin is not working? -

i trying make simple age calculator. adds age on side of input. calculates age inside input datepicker. .split not clean change date format.

i guessing problem problem of scope.

what d like, plugin update age on change of input. here is:

 (function ($) {         $.fn.ageit = function () {             var = this;             var positonthat = $(that).position();             var sizethat = $(that).width();              //add div ages             var option = {                 "position": " relative",                 "top": "0",                 "left": "300"             };              var templateage = "<div class='whatage" + $(this).attr('id') + "' style='display:inline-block;'>blablabla</div>";             $(that).after(templateage);             var leftposition = (parseint(sizethat) + parseint(positonthat.left) + parseint(option.left));             var toposition = parseint(positonthat.top) + parseint(option.top);              $('.whatage' + $(this).attr("id")).css(                 {                     position: 'absolute',                     top: toposition + "px",                     left: leftposition + "px",                     "z-index": 1000,                 }                  );               //uptadateage             function updateage(myobj) {                 var formateddate = myobj.val().split(/\//);                 formateddate = [formateddate[1], formateddate[0], formateddate[2]].join('/');                 var birthdate = new date(formateddate);                 var age = calculateage(birthdate);                 $('.whatage' + $(myobj).attr("id")).text(age + "&nbsp;ans");              };              //updateage($(this));             $(this).on("change", updateage($(this)));              //         }     })(jquery);      function calculateage(birthday) {         var agedifms = date.now() - birthday.gettime();         var agedate = new date(agedifms); // miliseconds epoch                 return math.abs(agedate.getutcfullyear() - 1970);     }      $("#birthdate").ageit(); 

this line:

        $(this).on("change", updateage($(this))); 

means, "set handler 'change' event the result of calling function updateage() parameter $(this). that's function call. because you've captured value of this in variable that, can write updateage() such doesn't need parameter:

        function updateage() {             var formateddate = that.val().split(/\//);             formateddate = [formateddate[1], formateddate[0], formateddate[2]].join('/');             var birthdate = new date(formateddate);             var age = calculateage(birthdate);             $('.whatage' + $(that).attr("id")).text(age + " ans");          }; 

then set event handler:

    $(this).on("change", updateage); 

note in jquery add-on you're building, value of this jquery object upon method called. don't need make new jquery object ($(this), $(that)). work write:

    this.on("change", updateage);