Jenscript Event Listener - значение «change», установленное Javascript

Question

У меня есть процесс, предназначенный для изменения объединенных полей адресов, введенных пользователем, в одно скрытое поле, которое будет использоваться Картами Google для удаления булавки на месте.

Слушатели, ответственные за конкатенацию, функционируют нормально, но когда я пытаюсь подключить слушателя к скрытому полю для выполнения размещения контактов, функция не выполняется.

Вот код, я использую:

$(document).ready(function initMap() { 

    ... 

    function join_address() { 
     var address = document.getElementById('id_form5-address1').value; 
     var city = document.getElementById('id_form5-city').value; 
     var state = document.getElementById('id_form5-state').value; 
     var zip = document.getElementById('id_form5-zip').value; 
     document.getElementById('id_jointAddress').value = address+", "+city+", "+state+", "+zip; 
     } 

    document.getElementById("id_form5-city").addEventListener("change", join_address); 
    document.getElementById("id_form5-state").addEventListener("change", join_address); 
    document.getElementById("id_form5-zip").addEventListener("change", join_address); 

    function codeAddress() { 
     console.log("function engaged") 
     var address = document.getElementById("id_jointAddress").value; 
     geocoder.geocode({ 'address': address}, function(results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
      map.setCenter(results[0].geometry.location); 
      var marker = new google.maps.Marker({ 
       map: map, 
       position: results[0].geometry.location 
      }); 
      } else { 
      alert("Geocode was not successful for the following reason: " + status); 
      } 
     }); 
     } 

    document.getElementById("id_jointAddress").addEventListener("change", codeAddress); 

    ... 

} 

«Функция занимается» даже не печатает на консоль, так что я предполагаю, что это слушатель, который строится неправильно, или находится в неправильном месте. Может ли кто-нибудь помочь?

Edit: Вот HTML объект вопрос:

<input type="hidden" name="jointAddress" id="id_jointAddress">

Если я отобразите элемент, и введите в поле непосредственно он вызывает слушателя. Я думаю, что слушатель «change» не отвечает на изменения, сделанные с помощью Javascript. Кто-нибудь знает о решении, которое будет работать для меня?

Answer 1

Проблема в том, что установка value с программной точки зрения не запускает событие изменения. Вы можете запустить synthetic event on your own. См http://jsfiddle.net/mendesjuan/uct8bL9d/2/

Если вы используете fireEvent function I linked to, вы можете просто добавить следующую строку в коде

var joint = document.getElementById('id_jointAddress'); 
joint.value = address + ", " + city + ", " + state + ", " + zip; 
fireEvent(joint, 'change'); 

Вот Сведение задачи:

document.querySelector('input').addEventListener('change', function() { 
 
    document.getElementById('output').innerHTML +='changed <br />'; 
 
}); 
 

 
document.querySelector('button').addEventListener('click', function() { 
 
    var input = document.querySelector('input'); 
 
    input.value = new Date(); 
 
    fireEvent(input, 'change') 
 
}); 
 

 
/** 
 
* Fire an event handler to the specified node. Event handlers can detect that the event was fired programatically 
 
* by testing for a 'synthetic=true' property on the event object 
 
* @param {HTMLNode} node The node to fire the event handler on. 
 
* @param {String} eventName The name of the event without the "on" (e.g., "focus") 
 
*/ 
 
function fireEvent(node, eventName) { 
 
    // Make sure we use the ownerDocument from the provided node to avoid cross-window problems 
 
    var doc; 
 
    if (node.ownerDocument) { 
 
     doc = node.ownerDocument; 
 
    } else if (node.nodeType == 9){ 
 
     // the node may be the document itself, nodeType 9 = DOCUMENT_NODE 
 
     doc = node; 
 
    } else { 
 
     throw new Error("Invalid node passed to fireEvent: " + node.id); 
 
    } 
 

 
    if (node.dispatchEvent) { 
 
     // Gecko-style approach (now the standard) takes more work 
 
     var eventClass = ""; 
 

 
     // Different events have different event classes. 
 
     // If this switch statement can't map an eventName to an eventClass, 
 
     // the event firing is going to fail. 
 
     switch (eventName) { 
 
      case "click": // Dispatching of 'click' appears to not work correctly in Safari. Use 'mousedown' or 'mouseup' instead. 
 
      case "mousedown": 
 
      case "mouseup": 
 
       eventClass = "MouseEvents"; 
 
       break; 
 

 
      case "focus": 
 
      case "change": 
 
      case "blur": 
 
      case "select": 
 
       eventClass = "HTMLEvents"; 
 
       break; 
 

 
      default: 
 
       throw "fireEvent: Couldn't find an event class for event '" + eventName + "'."; 
 
       break; 
 
     } 
 
     var event = doc.createEvent(eventClass); 
 

 
     var bubbles = eventName == "change" ? false : true; 
 
     event.initEvent(eventName, bubbles, true); // All events created as bubbling and cancelable. 
 

 
     event.synthetic = true; // allow detection of synthetic events 
 
     // The second parameter says go ahead with the default action 
 
     node.dispatchEvent(event, true); 
 
    } else if (node.fireEvent) { 
 
     // IE-old school style 
 
     var event = doc.createEventObject(); 
 
     event.synthetic = true; // allow detection of synthetic events 
 
     node.fireEvent("on" + eventName, event); 
 
    } 
 
};

<input /> 
 
<button>Set programatically</button> 
 

 
<div id="output"> </div>

Answer 2

Проблема в том, что значение параметра программно не запускает обработчики изменений. Если вы используете jQuery и вызываете val(), он запускает синтетическое событие изменения. Попробуйте обновить JavaScript для использования jQuery.

$(function(){ 
    function initMap() { 
     ... 
    } 

    function join_address() { 
     var address = $('#id_form5-address1').val(); 
     var city = $('#id_form5-city').val(); 
     var state = $('#id_form5-state').val(); 
     var zip = $('#id_form5-zip').val(); 
     $('#id_jointAddress').val(address+", "+city+", "+state+", "+zip); 
    } 

    $("#id_form5-city").on("change", join_address); 
    $("#id_form5-state").on("change", join_address); 
    $("#id_form5-zip").on("change", join_address); 

    function codeAddress() { 
     console.log("function engaged") 
     var address = $("#id_jointAddress").val(); 
     geocoder.geocode({ 'address': address}, function(results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
      map.setCenter(results[0].geometry.location); 
      var marker = new google.maps.Marker({ 
       map: map, 
       position: results[0].geometry.location 
      }); 
      } else { 
      alert("Geocode was not successful for the following reason: " + status); 
      } 
     }); 
     } 

    $("#id_jointAddress").on("change", codeAddress); 
});