2015-11-03 79 views
0

我有一个过程,旨在将用户输入的连接单独地址字段更改为单个隐藏字段,供Google地图使用该引脚放置该位置。Javascript事件监听器 - 通过Javascript设置的“更改”值

负责连接的事件监听器运行正常,但是当我尝试将监听器链接到隐藏域以执行引脚布局时,该函数不会被执行。

这里是我使用的代码:

$(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所做的更改。有谁知道一个解决方案,将为我工作?

+0

什么类型的对象是'#id_jointAddress?' – stackoverfloweth

+0

它返回了你的html对象_document.getElementById(“ id_jointAddress“)_? –

+0

介意提供一个例子? [它似乎工作正常](http://jsfiddle.net/ofyo6rtk/)。 –

回答

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>

+0

谢谢!这帮了很多 –

0

问题是,编程设置值不会触发更改处理程序。如果您使用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); 
}); 
+1

谢谢,我试着做出这些修改,但是它进一步破坏了它。我不是很习惯jQuery。如果我找不到一个简单的javascript解决方案,我会尽力实现这一改变。 –

+0

让我知道如果你有兴趣实施jQuery,我可以帮助你解决你遇到的错误 – stackoverfloweth

+0

我再次尝试这个,并得到了页面的工作,但它似乎卡在同一个地方。 'join_address'函数成功执行,但'codeAddress'函数永远不会被调用。 –