Javascript 为什么jquery插件中的my.change（）函数不工作？

我想做一个简单的年龄计算器。它只是在输入端添加年龄。它通过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();

（函数（$）{
$.fn.ageIt=函数（）{
var=这个；
var positionat=$（that.position（）；
var sizethat=$（that）.width（）；
//为年龄添加div
var选项={
“位置”：“相对”，
“顶部”：“0”，
“左”：“300”
};
var templateage=“blabla”；
$（即）.after（模板年龄）；
var leftposition=（parseInt（sizethat）+parseInt（positionhat.left）+parseInt（option.left））；
var-toposition=parseInt（positionat.top）+parseInt（option.top）；
$（'.whattage'+$（this.attr（“id”）.css(
{
位置：'绝对'，
顶部：拓扑位置+“px”，
左：左位置+“px”，
“z指数”：1000，
}
); 
//上流社会
函数更新（myobj）{
var formattedate=myobj.val（）.split（/\/）；
FormattedDate=[FormattedDate[1]，FormattedDate[0]，FormattedDate[2]]；
var生日=新日期（格式日期）；
变量年龄=计算年龄（出生日期）；
$（'.whattage'+$（myobj.attr（“id”））.text（age+“ans”）；
};
//updateage（$（this））；
在（“更改”，updateage（$（this）））；
//
}
})（jQuery）；
函数计算表（生日）{
var ageDifMs=Date.now（）-birth.getTime（）；
var ageDate=新日期（ageDifMs）；//距离历元的毫秒
返回Math.abs（ageDate.getUTCFullYear（）-1970）；
}
$（“#生日”）.ageIt（）；

此行：

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

表示“将'change'事件的处理程序设置为使用参数

$（this）

调用函数

updateage（）

的结果。这是一个函数调用。因为您已经在变量

this

中捕获了

this

的值，所以可以编写

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

这一行：

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

意思是，“将'change'事件的处理程序设置为使用参数

$（this）

调用函数

updateage（）

的结果。这是一个函数调用。因为您已经在变量

that

中捕获了

this

的值，所以可以编写

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

---

因为在

change

event handler事件侦听器回调时，您正在分配

updateage（$（this））

的返回值。回调是捕获事件时要执行的函数。您正在立即调用回调，因此无法达到回调的目的。如果要引用事件目标，jquery会将其绑定到

this

，只要您没有使用箭头函数syntax，因为您正在分配

updateage（$（this））的返回值

随着

更改

事件句柄事件侦听器进行回调。回调是捕获事件时要执行的函数。您正在立即调用回调，因此无法达到回调的目的。如果要引用事件目标，jquery将其绑定到

this

，只要您不使用箭头函数syntaxOk。它应该在同一页面中的多个实例中工作？坦斯克。@JohnDoe22366是的，应该是。好的。它应该在同一页面中的多个实例中工作？坦斯克。@JohnDoe22366是的，应该是。