javascript - onchange 事件用于 DOM 创建的输入和 IE 7+8

Question

我试图弄清楚为什么我的 javascript 通过 DOM 动态创建输入元素在 Firefox 中是可引用的，但在 IE 7 或 8 中却不能引用。

当用户单击按钮时，我会触发以下函数

function addEndPoint_intelDNS(){
    pageCounter.addMethod("endpoint_count");
    count = pageCounter.getendpoint_count();

    //endpoint IP and hostname labels
    var endpointIPText = document.createTextNode('Endpoint ' + count + ' IP: \u00a0');
    var endpointHostText = document.createTextNode('\u00a0 Endpoint ' + count + ' Hostname: \u00a0 ');
    var brNode = document.createElement('br');

    //endpoint InputIPBox
    var endpoint_IP_InputElement = document.createElement('input');
    endpoint_IP_InputElement.setAttribute('type', 'text');
    endpoint_IP_InputElement.setAttribute('id', 'endpoint_'+count+'_ip');
    endpoint_IP_InputElement.setAttribute('name', 'endpoint_'+count+'_ip');
    endpoint_IP_InputElement.setAttribute('maxlength', '15');
    endpoint_IP_InputElement.setAttribute('onChange', 'resolveMe(this.value,\u0022endpoint_'+count+'_name\u0022, \u0022ip\u0022);');


    //endpoint host inputbox
    var endpoint_HOST_InputElement = document.createElement('input');
    endpoint_HOST_InputElement.setAttribute('type', 'text');
    endpoint_HOST_InputElement.setAttribute('id', 'endpoint_'+count+'_name');
    endpoint_HOST_InputElement.setAttribute('name', 'endpoint_'+count+'_name');
    endpoint_HOST_InputElement.setAttribute('size', '35');
    endpoint_HOST_InputElement.setAttribute('onChange', 'resolveMe(this.value,\u0022endpoint_'+count+'_ip\u0022, \u0022name\u0022);');

    //output
    document.getElementById('intelDNS_endpoints_codeblock').appendChild(endpointIPText);
    document.getElementById('intelDNS_endpoints_codeblock').appendChild(endpoint_IP_InputElement);
    document.getElementById('intelDNS_endpoints_codeblock').appendChild(endpointHostText);
    document.getElementById('intelDNS_endpoints_codeblock').appendChild(endpoint_HOST_InputElement);
    document.getElementById('intelDNS_endpoints_codeblock').appendChild(brNode);

请忽略 pageCounter 对象，它只是一个跟踪用户将提供多少输入的对象。

正如您所看到的，两个输入文本框(InputIPBox 和 host_inputbox)中的每一个都添加了一个 onChange 事件属性，它们实际上是相同的，因此我将提供其中一个函数

function resolveMe(val, loc_id, type){
    alert(val);
    switch(type){
        case "ip":
                resolveIP2DNS(val, loc_id);
            break;
        case "name":
                resolveDNS2IP(val, loc_id);
            break;
    }

}

function resolveIP2DNS(ip, loc){
    doclocation = loc;
    var ajaxRequest; //initialize ajax object
    var browser = navigator.appName; //find the browser name
    if(browser == "Microsoft Internet Explorer"){
        /* Create the object using MSIE's method */
        ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else{
        /* Create the object using other browser's method */
        ajaxRequest = new XMLHttpRequest();
    }

    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4)
        {
            // Get the data from the server's response
            //what on this page is changing
            var xmlRes=ajaxRequest.responseXML.documentElement;
            try {
                var dns = xmlRes.getElementsByTagName('DNS')[0].firstChild.nodeValue;
            }catch (err){
                dns = "Not Resolvable";
            }
            //output to location in page
            document.getElementById(doclocation).value = dns;   
        }

    }
    ajaxRequest.open("GET", "/ajax.psp?ip2DNS=" + ip, true);
    ajaxRequest.setRequestHeader('Content-Type', "text/xml");
    ajaxRequest.send(null);
}

ajax.psp 页面工作完美，并且当为我网站的不同部分调用此函数时，该功能可以工作，所以我知道它正在接收所需的分辨率值。

所以我很困惑，因为它在 Firefox 中工作得很好，但在 IE 中却不行。进一步调试我发现 onchange 事件永远不会到达 IE 中的第一个函数(因此警报永远不会弹出)。

让我知道你们的想法......

Answer 1

不要使用“setAttribute()”来设置应该是 DOM 节点上的属性的内容。因此，设置“onchange”处理程序

endpoint_IP_InputElement.onchange = function() {
  resolveMe(this.value, 'endpoint_'+count+'_name', 'ip');
};

这也适用于 Firefox 和 Chrome 等。

编辑 - 等等 - 我们必须确保 this已正确绑定(bind)在函数中。我不确定它是否会在旧版 IE 中自动绑定(bind)，所以我会检查一下。

再次编辑 - 是的，应该没问题。当你的函数被调用时，this将被更改<input>节点。