我有一个隐藏的文本字段,其值通过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!');
})
当前回答
$('#userid').change(function(){
//fire your ajax call
});
$('#userid').val(10).change();
其他回答
由于隐藏输入不会在更改时触发“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] );
$('#userid').change(function(){
//fire your ajax call
});
$('#userid').val(10).change();
这个例子每次隐藏的draft字段改变它的值时返回draft字段值(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 });
}
};
})();
可以使用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);
https://jsfiddle.net/bvvmhvfk/
虽然这个帖子已经有3年了,但下面是我的解决方案:
$(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");
});
}