jQuery - Wertänderung im ausgeblendeten Eingabefeld erkennen

Ich habe ein verstecktes Textfeld, dessen Wert über eine AJAX-Antwort aktualisiert wird.

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

Wenn sich dieser Wert ändert, möchte ich eine AJAX-Anfrage auslösen. Kann jemand raten, wie man die Änderung erkennt?

Ich habe den folgenden Code, weiß aber nicht, wie ich nach dem Wert suchen soll:

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

Das ist also viel spät, aber ich habe eine Antwort gefunden, falls sie für jemanden nützlich sein sollte, der auf diesen Thread stößt.

Wertänderungen an ausgeblendeten Elementen lösen das Ereignis .change () nicht automatisch aus. Wo immer Sie diesen Wert festlegen, müssen Sie jQuery auch anweisen, ihn auszulösen.

function setUserID(myValue) {
     $('#userid').val(myValue)
                 .trigger('change');
}

Sobald dies der Fall ist,

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

sollte wie erwartet funktionieren.

Da versteckte Eingaben bei Änderungen kein "Änderungs" -Ereignis auslösen, habe ich stattdessen MutationObserver verwendet, um dies auszulösen.

(Manchmal werden versteckte Eingabewertänderungen von anderen Skripten vorgenommen, die Sie nicht ändern können.)

Dies funktioniert nicht in IE10 und darunter

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] );

Sie können einfach die folgende Funktion verwenden. Sie können auch das Typelement ändern.

 $("input[type=hidden]").bind("change", function() {
       alert($(this).val()); 
 });

Wertänderungen an ausgeblendeten Elementen lösen das Ereignis .change () nicht automatisch aus. Wo immer Sie diesen Wert festlegen, müssen Sie jQuery auch anweisen, ihn auszulösen.

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();

sollte wie erwartet funktionieren.

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

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

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

Es ist möglich, die Object.defineProperty()Eigenschaft 'value' des Eingabeelements neu zu definieren und während seiner Änderung alles zu tun.

Object.defineProperty() ermöglicht es uns, einen Getter und Setter für eine Eigenschaft zu definieren und diese so zu steuern.

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/

In diesem Beispiel wird der Wert des Entwurfsfelds jedes Mal zurückgegeben, wenn das ausgeblendete Entwurfsfeld seinen Wert ändert (Chrome-Browser):

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  });

       }
  };
})();

Aufbauend auf der Antwort von Viktar können Sie eine Implementierung eines bestimmten versteckten Eingabeelements einmal aufrufen, um sicherzustellen, dass nachfolgende Änderungsereignisse ausgelöst werden, wenn sich der Wert des Eingabeelements ändert:

/**
 * 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);
  }
}

Nennen Sie dies auf Dokument fertig wie folgt:

$(document).ready(function() {
  setupHiddenInputChangeListener($('myinput')[0]);
});

Obwohl dieser Thread 3 Jahre alt ist, ist hier meine Lösung:

$(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");
    });
}