Почему моя функция .change() внутри плагина jquery не работает?

Question

Я пытаюсь сделать простой калькулятор возраста. Он просто добавляет возраст на стороне ввода. Он вычисляет возраст, который находится внутри ввода datepicker. .split не очень чистый, но это просто изменение формата даты.

Я предполагаю, что моя проблема - проблема сферы.

Что мне нравится, это мой плагин, чтобы обновить возраст при изменении ввода. Вот оно:

(function ($) { 
     $.fn.ageIt = function() { 
      var that = this; 
      var positonthat = $(that).position(); 
      var sizethat = $(that).width(); 

      //Add div for 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 from epoch   
     return Math.abs(ageDate.getUTCFullYear() - 1970); 
    } 

    $("#BirthDate").ageIt(); 

Answer 1

Эта линия:

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

означает «Установить обработчик для„изменения“событие для результат вызова функции updateage() с параметром $(this) Это. потому что вы уже зафиксировали значение this в переменной that, вы можете написать updateage() так, чтобы он не нуждался в параметре:

 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"); 

     }; 

Затем, чтобы настроить обработчик событий:

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

Обратите внимание, что в JQuery надстройку на как вы строите, значение this будет объект JQuery, для которого вызывается метод. Вам не нужно создавать новый объект jQuery ($(this), $(that)). Так что это будет работать, чтобы просто написать:

this.on("change", updateage);