jQuery - обнаруживает изменение значения в скрытом поле ввода

У меня есть скрытое текстовое поле, значение которого обновляется через ответ 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  
})

должен работать как ожидалось.

Поскольку скрытый ввод не вызывает событие «изменение» при изменении, я использовал 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]").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();

должен работать как ожидалось.

http://jsfiddle.net/7CM6k/3/

$('#userid').change(function(){
  //fire your ajax call  
});

$('#userid').val(10).change();

Это можно использовать Object.defineProperty()для того, чтобы переопределить свойство 'value' элемента input и сделать что-нибудь во время его изменения.

Object.defineProperty() позволяет нам определять геттер и сеттер для свойства, таким образом управляя им.

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/

В этом примере возвращается значение поля черновика каждый раз, когда скрытое поле черновика меняет свое значение (браузер 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  });

       }
  };
})();

Основываясь на ответе Виктора , вот реализация, которую вы можете вызвать один раз для данного скрытого элемента ввода, чтобы гарантировать, что последующее событие изменения будет запущено при изменении значения элемента ввода:

/**
 * 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://stackoverflow.com/a/17695525/4342230
 *
 * @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://stackoverflow.com/a/38802602/4342230
 *
 * @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]);
});

Хотя этой теме уже 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");
    });
}