为何jQuery.on("blur", handler())会立即执行处理函数？代码求助

你的问题出在事件绑定的写法上：rows.on("blur", OSH.doDivisions(rows)) 这行代码里，OSH.doDivisions(rows)是直接执行了函数，而不是把函数作为事件处理程序传递给on()方法。所以代码执行到这一行时，立刻就弹出alert，同时因为这个函数没有返回值（默认返回undefined），相当于给blur事件绑定了一个无效的处理程序，之后输入框失去焦点时自然不会触发任何操作。

修正后的代码 #

把事件绑定的部分改成用匿名函数包裹：

OSH.setDivisions = function() {
let rows = $("input[name^='compdiv']");
rows.on("blur", function() {
    OSH.doDivisions(rows);
});
}

OSH.doDivisions = function(rows) {
    alert("in doDivisions()");
    if (OSH.emptyDivisions(rows) == 0) {
        OSH.addDivision();
    }
}

也可以用bind()来绑定参数，写法更简洁：

OSH.setDivisions = function() {
let rows = $("input[name^='compdiv']");
rows.on("blur", OSH.doDivisions.bind(null, rows));
}

OSH.doDivisions = function(rows) {
    alert("in doDivisions()");
    if (OSH.emptyDivisions(rows) == 0) {
        OSH.addDivision();
    }
}

这样修改后，on()方法接收的是一个函数引用，只有当输入框触发blur事件时，才会执行这个函数并调用OSH.doDivisions(rows)，就不会出现页面加载就弹窗、后续事件不触发的问题了。

内容的提问来源于stack exchange，提问作者sootsnoot