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

Question

У меня есть скрытое текстовое поле, значение которого обновляется с помощью ответа AJAX.

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

Когда это значение изменяется, я хотел бы запустить запрос AJAX.Может кто-нибудь посоветовать, как обнаружить изменение?

У меня есть следующий код, но не знаю, как искать значение:

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

Answer 1

Так что уже поздно, но я нашел ответ на тот случай, если он пригодится всем, кто сталкивается с этой темой.

Изменения значения для скрытых элементов не запускают автоматически событие .change (). Поэтому, где бы вы ни устанавливали это значение, вы также должны указать jQuery, чтобы оно вызывалось.

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

Раз это так,

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

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

Answer 2

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

Answer 3

Вы можете просто использовать приведенную ниже функцию. Вы также можете изменить элемент type.

 $("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/

Answer 4

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

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/

Answer 5

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

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

Answer 6

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

       }
  };
})();

Answer 7

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