我有一个隐藏的文本字段,其值通过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!');
})
当前回答
这个例子每次隐藏的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 });
}
};
})();
其他回答
所以这已经很晚了,但我已经找到了一个答案,以防它对任何遇到这条线索的人有用。
改变隐藏元素的值不会自动触发.change()事件。所以,无论你在哪里设置这个值,你都必须告诉jQuery去触发它。
function setUserID(myValue) {
$('#userid').val(myValue)
.trigger('change');
}
一旦这样,
$('#userid').change(function(){
//fire your ajax call
})
应该按预期工作。
$('#userid').change(function(){
//fire your ajax call
});
$('#userid').val(10).change();
你可以简单地使用下面的函数,你也可以改变类型元素。
$("input[type=hidden]").bind("change", function() {
alert($(this).val());
});
改变隐藏元素的值不会自动触发.change()事件。所以,无论你在哪里设置这个值,你都必须告诉jQuery去触发它。
超文本标记语言
<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();
应该按预期工作。
http://jsfiddle.net/7CM6k/3/
由于隐藏输入不会在更改时触发“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] );
我从Vikars的答案开始,但也注意到当在HTML表单中使用隐藏表单字段时,最后的更改没有被提交。后来我找到了托马斯的答案,所以我把两者结合到下面的解决方案中,这似乎很好地适用于我的隐藏表单字段也在提交:
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!');
});