Javascript事件監聽器 - 通過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); 

    ... 

} 

「功能從事」從來沒有打印到控制檯，所以我假設它是構建錯誤的聽衆，或者是放錯了地方。任何人都可以協助

編輯：這是有問題的HTML對象：

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

如果我取消隱藏元件，和類型直接在字段它觸發監聽器。我認爲「更改」偵聽器不會響應通過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); 
});