在onchange之前输入jquery获得旧值并在更改后获取值 [英] Input jquery get old value before onchange and get value after on change

问题描述

我在jquery中有一个输入文本，我想知道是否有可能获得输入文本的值 onchange 之前的（> type = number 和 type = text ） c>发生并且在onchange发生后也获得相同输入输入文本的值。

我试过保存然后在onchange中调用这个值，但是我得到的是空值

解决方案

最简单的方法是使用原始值当元素获得焦点时， 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）; 
}）; 
  

更好地使用委托事件处理程序

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

这是使用委托事件连接到 document ：

.on（'focusin'，'input'，function（）{
console.log（Saving value+ $（this）.val（））;
$（this）.data（' （''change'，'input'，function（）{
var prev = $（this）.data（'val'，$（this）.val（））;
}）。 '）;
var current = $（this）.val（）;
console.log（Prev value+ prev）;
console.log（New value+ current） ;
}）;

JsFiddle： http://jsfiddle.net/TrueBlueAussie/e4ovx435/65/ b
$ b

委托活动有效通过监听一个祖先元素（ documentin ， change 等） / code> *），然后将jQuery过滤器（ input ）应用于气泡链中的元素，然后应用功能仅适用于那些引发事件的匹配元素。



*注意：一般规则使用文档作为委托事件的默认值，而不是 body 。 body 有一个bug，与样式有关，可能导致它无法获取冒泡的鼠标事件。还有 document 总是存在的，所以你可以附加到 DOM准备好的处理程序之外：）

I have an input text in jquery i want to know if it possible to get the value of that input text(type=number and type=text) before the onchange happens and also get the value of the same input input text after the onchange happens. This is using jquery.

What I tried:

I tried saving the value on variable then call that value inside onchange but i am getting blank value

解决方案

The simplest way is to save the original value using data() when the element gets focus. Here is a really basic example:

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

Better to use Delegated Event Handlers

Note: it is generally more efficient to use a delegated event handler when there can be multiple matching elements. This way only a single handler is added (smaller overhead and faster initialisation) and any speed difference at event time is negligible.

Here is the same example using delegated events connected to 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/

Delegated events work by listening for an event (focusin, change etc) on an ancestor element (document* in this case), then applying the jQuery filter (input) to only the elements in the bubble chain then applying the function to only those matching elements that caused the event.

*Note: A a general rule, use document as the default for delegated events and not body. body has a bug, to do with styling, that can cause it to not get bubbled mouse events. Also document always exists so you can attach to it outside of a DOM ready handler :)

这篇关于在onchange之前输入jquery获得旧值并在更改后获取值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！