jQuery – 检测隐藏的input字段上的值更改
我有一个隐藏的文本字段的值通过AJAX响应更新。
<input type="hidden" value="" name="userid" id="useid" /> 当这个值改变时，我想发起一个AJAX请求。 任何人都可以build议如何检测变化？
我有以下代码，但不知道如何查找值：
$('#userid').change( function() { alert('Change!'); })
所以现在已经很晚了，但是我发现了一个答案，以防万一遇到这个线程的人有用。
对隐藏元素的值更改不会自动触发.change（）事件。 所以，无论你在哪里设置这个值，你也必须告诉jQuery来触发它。
function setUserID(myValue) { $('#userid').val(myValue) .trigger('change'); }
一旦这样的话，
$('#userid').change(function(){ //fire your ajax call })
应该按预期工作。
由于隐藏的input不会在更改时触发“更改”事件，因此我使用MutationObserver来触发此事件。
（有时隐藏的input值更改是由其他一些无法修改的脚本来完成的）
这在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] );
你可以简单地使用下面的函数，也可以改变types元素。
$("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();
可以使用Object.defineProperty()来重新定义input元素的“值”属性，并在其更改过程中执行任何操作。
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);
虽然这个线程是3岁，这是我的解决scheme：
$(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"); }); }
