JS Как отслеживать изменения в поле, если оно меняется не вручную?

Question

[Антон Натаров]

Добрый вечер, коллеги. Делаю Яндекс Карту на сайте. У меня есть поле в которое пользователь вводит название города, либо сообщает через браузер. При клике балуном на карте, адрес в поле меняется на тот что указан на карте. При "Сообщить ваше месторасположения?", поле заполняется тоже автоматом.
Проблема такова: Если сообщают свое месторасположение через браузер т.е. руками в поле Город ничего не пишут. То карта не обновляется и метка не ставится.

Я пытался отследить изменения таким образом:

$('#address').live('change', function() {
            alert( "Изменилось!" );
        });

Но при таком коде, он срабатывает только тогда, когда мы меняем руками. Как мне прицепить слушатель таким образом, что бы он применял его, когда меняется содержимое в блоке?

Comments

[Kovalsky]

Говоря "сообщают свое месторасположение через браузер" вы имеете в виду Geolocation API ? То есть используете navigator.geolocation.getCurrentPosition?

[Kovalsky]

А запилите элементарный пример на jsfiddle.net? Что-то не верится, что у вас контент поля меняется, а onchange не триггерится.

[Сергей]

Никита Полевой: onchange срабатывает при потере фокуса, а нет ножек - нет и мультиков

[Kovalsky]

void01: ну мне кажется все эти ухищрения имеют смысл только как теоретические, а в данном случае можно было бы наверное просто "декорировать" navigator.geolocation.getCurrentPosition чтобы при вызове этой функции выполнялись нужные функции и оригинальная navigator.geolocation.getCurrentPosition.

Или не прокатит?

[Сергей]

Никита Полевой: можно даже изменить прототип, геолокейшена, но вламываться в чужие API лично я не люблю

Answer 1

[Medin K]

Не рекомендуется!
codepen.io/anon/pen/jrwByb

Answer 2

[Anton B]

$(document.body).on('change', '#address', function() {
alert( "Изменилось!" );
});

Comments

[Антон Натаров]

Так не работает.

Answer 3

[xmoonlight]

$('#address').on('change', function() {
      alert( "Изменилось!" );
});

Answer 4

[Дмитрий Беляев]

Если все изменения происходят через jQuery, то должен помочь такой хак:

void function($) {
  var old = $.fn.val
  $.fn.val = function val() {
    var r = old.apply(this, arguments);
    this.change();
    return r;
  }
}(jQuery);

Answer 5

[Сергей]

для события change контрол должен потерять фокус, а т.к. он его даже не получает, логично, что событие не срабатывает.

var oldVal = null;
var fixTime; // чтобы евент не стрелял на каждый новый символ в поле ввода

$('#address').on('myEvt', function() {
      alert("Суши весла! Поле поменялось");
});

window.setInterval(function(){
  if (oldVal == null){
  	oldVal = document.getElementById('address').value;
    return;
  } else if (oldVal!=document.getElementById('address').value){
  		oldVal = document.getElementById('address').value;
      fixTime = (new Date()).getTime();
      return;
  } else if (fixTime&&(new Date()).getTime() - fixTime > 5000) { //5 секунд задержка, перед запуском события
  	fixTime = null;
    oldVal = null;
    $('#address').trigger('myEvt');
  }
},500);

https://jsfiddle.net/z4udu2w7/