我有一个隐藏的文本字段,其值通过AJAX响应更新。

<input type="hidden" value="" name="userid" id="useid" />

当这个值发生变化时,我希望触发一个AJAX请求。有谁能告诉我如何发现这种变化吗?

我有以下代码,但不知道如何寻找值:

$('#userid').change( function() {  
    alert('Change!'); 
}) 

当前回答

虽然这个帖子已经有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");
    });
}

其他回答

由于隐藏输入不会在更改时触发“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] );

所以这已经很晚了,但我已经找到了一个答案,以防它对任何遇到这条线索的人有用。

改变隐藏元素的值不会自动触发.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();

我从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!');
   });

虽然这个帖子已经有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");
    });
}