javascript - 输入 jQuery 在 onchange 之前获取旧值并在 onchange 之后获取值

Question

我在 jQuery 中有一个 input text 我想知道是否可以获取该 input text 的值(type=number和 type=text) 在 onchange 发生之前，并且在 onchange 发生之后也获得相同输入文本的值。这是使用 jQuery。

我尝试了什么:

我尝试将值保存在变量上，然后在 onchange 中调用该值，但我得到的是一个空白值。

Answer 1

最简单的方法是在元素获得焦点时使用 data() 保存原始值。这是一个非常基本的示例:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/e4ovx435/

$('input').on('focusin', function(){
    console.log("Saving value " + $(this).val());
    $(this).data('val', $(this).val());
});

$('input').on('change', function(){
    var prev = $(this).data('val');
    var current = $(this).val();
    console.log("Prev value " + prev);
    console.log("New value " + current);
});

最好使用委托(delegate)事件处理程序

注意:当可以有多个匹配元素时，使用委托(delegate)事件处理程序通常更有效。这种方式只添加了一个处理程序(更小的开销和更快的初始化)并且任何速度差异在事件时间都可以忽略不计。

下面是使用委托(delegate)事件连接到 document 的相同示例:

$(document).on('focusin', 'input', function(){
    console.log("Saving value " + $(this).val());
    $(this).data('val', $(this).val());
}).on('change','input', function(){
    var prev = $(this).data('val');
    var current = $(this).val();
    console.log("Prev value " + prev);
    console.log("New value " + current);
});

JsFiddle: http://jsfiddle.net/TrueBlueAussie/e4ovx435/65/

委托(delegate)事件通过监听祖先元素(document* 在这种情况下)上的事件(focusin、change 等)来工作，然后将 jQuery 过滤器(输入)仅应用于气泡链中的元素 然后将函数仅应用于那些导致事件的匹配元素 .

*注意:一般规则是，使用 document 作为委托(delegate)事件的默认值，而不是 body。 body 有一个错误，与样式有关，可能导致它无法获得冒泡的鼠标事件。此外，document 始终存在，因此您可以在 DOM 就绪处理程序 之外附加到它 :)