我有一个隐藏的文本字段,它的值通过 AJAX 响应进行更新。
<input type="hidden" value="" name="userid" id="useid" />
当这个值发生变化时,我想触发一个AJAX请求。有没有人能指导一下如何检测变化?
我有以下代码,但不知道如何查找该值:
$('#userid').change( function() {
alert('Change!');
})
我有一个隐藏的文本字段,它的值通过 AJAX 响应进行更新。
<input type="hidden" value="" name="userid" id="useid" />
当这个值发生变化时,我想触发一个AJAX请求。有没有人能指导一下如何检测变化?
我有以下代码,但不知道如何查找该值:
$('#userid').change( function() {
alert('Change!');
})
虽然回答有点晚,但我发现了一个答案,如果有人找到这个线程可能会有用。
对隐藏元素值的更改不会自动触发.change()事件。因此,无论您在何处设置该值,都必须告诉jQuery触发它。
function setUserID(myValue) {
$('#userid').val(myValue)
.trigger('change');
}
一旦这种情况发生,
$('#userid').change(function(){
//fire your ajax call
})
应按预期工作。
.trigger()
比仅调用change()
更好吗? - HannasetUserID()
中添加代码来检查值是否真正发生了更改。if ($('#userid').val() != myVaule) { // set val() and trigger change }
- nnattawat因为隐藏的输入不会在更改时触发“change”事件,因此我使用MutationObserver来代替触发。
(有时您无法修改某些其他脚本执行的隐藏输入值更改)
这在IE10及以下版本中不起作用。
MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
var trackChange = function(element) {
var observer = new MutationObserver(function(mutations, observer) {
if(mutations[0].attributeName == "value") {
$(element).trigger("change");
}
});
observer.observe(element, {
attributes: true
});
}
// Just pass an element to the function to start tracking
trackChange( $("input[name=foo]")[0] );
input[type=hidden]
。 - Shaytrigger('change')
对我不起作用,所以我创建了一个 CustomEvent,注册它,然后使用 element.dispatchEvent(myCustomEvent)
。 - butcarudev $("input[type=hidden]").bind("change", function() {
alert($(this).val());
});
对隐藏元素的值进行更改不会自动触发.change()事件。因此,无论您在何处设置该值,都必须告诉jQuery触发它。
HTML
<div id="message"></div>
<input type="hidden" id="testChange" value="0" />
JAVASCRIPT
var $message = $('#message');
var $testChange = $('#testChange');
var i = 1;
function updateChange() {
$message.html($message.html() + '<p>Changed to ' + $testChange.val() + '</p>');
}
$testChange.on('change', updateChange);
setInterval(function() {
$testChange.val(++i).trigger('change');;
console.log("value changed" +$testChange.val());
}, 3000);
updateChange();
应该按预期工作。
$('#userid').change(function(){
//fire your ajax call
});
$('#userid').val(10).change();
在 Viktar 的回答 基础上,这里提供一种实现方式,您可以对一个给定的隐藏输入元素调用一次,以确保每当输入元素的值更改时都会触发后续更改事件:
/**
* Modifies the provided hidden input so value changes to trigger events.
*
* After this method is called, any changes to the 'value' property of the
* specified input will trigger a 'change' event, just like would happen
* if the input was a text field.
*
* As explained in the following SO post, hidden inputs don't normally
* trigger on-change events because the 'blur' event is responsible for
* triggering a change event, and hidden inputs aren't focusable by virtue
* of being hidden elements:
* https://dev59.com/pWMm5IYBdhLWcg3wVdx5#17695525
*
* @param {HTMLInputElement} inputElement
* The DOM element for the hidden input element.
*/
function setupHiddenInputChangeListener(inputElement) {
const propertyName = 'value';
const {get: originalGetter, set: originalSetter} =
findPropertyDescriptor(inputElement, propertyName);
// We wrap this in a function factory to bind the getter and setter values
// so later callbacks refer to the correct object, in case we use this
// method on more than one hidden input element.
const newPropertyDescriptor = ((_originalGetter, _originalSetter) => {
return {
set: function(value) {
const currentValue = originalGetter.call(inputElement);
// Delegate the call to the original property setter
_originalSetter.call(inputElement, value);
// Only fire change if the value actually changed.
if (currentValue !== value) {
inputElement.dispatchEvent(new Event('change'));
}
},
get: function() {
// Delegate the call to the original property getter
return _originalGetter.call(inputElement);
}
}
})(originalGetter, originalSetter);
Object.defineProperty(inputElement, propertyName, newPropertyDescriptor);
};
/**
* Search the inheritance tree of an object for a property descriptor.
*
* The property descriptor defined nearest in the inheritance hierarchy to
* the class of the given object is returned first.
*
* Credit for this approach:
* https://dev59.com/hpnga4cB1Zd3GeqPbJsC#38802602
*
* @param {Object} object
* @param {String} propertyName
* The name of the property for which a descriptor is desired.
*
* @returns {PropertyDescriptor, null}
*/
function findPropertyDescriptor(object, propertyName) {
if (object === null) {
return null;
}
if (object.hasOwnProperty(propertyName)) {
return Object.getOwnPropertyDescriptor(object, propertyName);
}
else {
const parentClass = Object.getPrototypeOf(object);
return findPropertyDescriptor(parentClass, propertyName);
}
}
在文档准备就绪时调用此函数,如下所示:
$(document).ready(function() {
setupHiddenInputChangeListener($('myinput')[0]);
});
可以使用Object.defineProperty()
来重新定义输入元素的'value'属性并在其变化期间执行任何操作。
Object.defineProperty()
允许我们为属性定义getter和setter,从而控制它。
replaceWithWrapper($("#hid1")[0], "value", function(obj, property, value) {
console.log("new value:", value)
});
function replaceWithWrapper(obj, property, callback) {
Object.defineProperty(obj, property, new function() {
var _value = obj[property];
return {
set: function(value) {
_value = value;
callback(obj, property, value)
},
get: function() {
return _value;
}
}
});
}
$("#hid1").val(4);
我从Vikars的答案开始,但是注意到当HTML表单中使用隐藏表单字段时,最后的更改没有被提交。后来我找到了Thomas的答案,因此我将两者结合起来得到了以下解决方案,这似乎对于我在提交时的隐藏表单字段也起作用:
function replaceWithWrapper(selector, property, callback) {
function findDescriptor(obj, prop){
if (obj != null){
return Object.hasOwnProperty.call(obj, prop)?
Object.getOwnPropertyDescriptor(obj, prop):
findDescriptor(Object.getPrototypeOf(obj), prop);
}
}
jQuery(selector).each(function(idx, obj) {
var {get, set} = findDescriptor(obj, property);
Object.defineProperty(obj, property, {
configurable: true,
enumerable: true,
get() { //overwrite getter
var v = get.call(this); //call the original getter
//console.log("get '+property+':", v, this);
return v;
},
set(v) { //same for setter
//console.log("set '+property+':", v, this);
set.call(this, v);
callback(obj, property, v)
}
});
});
}
replaceWithWrapper('#myhiddenfield', 'value', function() {
console.log('myhiddenfield value changed!');
});
这个例子将在隐藏草稿字段的值改变时(通过Chrome浏览器)返回草稿字段的值:
var h = document.querySelectorAll('input[type="hidden"][name="draft"]')[0];
//or jquery.....
//var h = $('input[type="hidden"][name="draft"]')[0];
observeDOM(h, 'n', function(draftValue){
console.log('dom changed draftValue:'+draftValue);
});
var observeDOM = (function(){
var MutationObserver = window.MutationObserver ||
window.WebKitMutationObserver;
return function(obj, thistime, callback){
if(typeof obj === 'undefined'){
console.log('obj is undefined');
return;
}
if( MutationObserver ){
// define a new observer
var obs = new MutationObserver(function(mutations, observer){
if( mutations[0].addedNodes.length || mutations[0].removedNodes.length ){
callback('pass other observations back...');
}else if(mutations[0].attributeName == "value" ){
// use callback to pass back value of hidden form field
callback( obj.value );
}
});
// have the observer observe obj for changes in children
// note 'attributes:true' else we can't read the input attribute value
obs.observe( obj, { childList:true, subtree:true, attributes:true });
}
};
})();
虽然这个帖子已经三年了,但是这是我的解决方案:
$(function ()
{
keep_fields_uptodate();
});
function keep_fields_uptodate()
{
// Keep all fields up to date!
var $inputDate = $("input[type='date']");
$inputDate.blur(function(event)
{
$("input").trigger("change");
});
}