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

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

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

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

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

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

Ответ 1

Так что это поздно, но я нашел ответ, если он станет полезным для всех, кто сталкивается с этим потоком.

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

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

Как только это произойдет,

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

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

Ответ 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] );

Ответ 3

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

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

Ответ 4

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

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/

Ответ 5

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

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

Ответ 6

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