Question

我试图弄清楚为什么我通过DOM动态创建输入元素的javascript在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对象，它只是一个跟踪用户将提供多少输入的对象。

正如您所看到的，2个输入文本框（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在函数中正确绑定。我不确定它会在旧的IE中自动绑定，所以我会检查。

再次编辑 - 是的，它应该没问题。调用函数后，this将是已更改的<input>节点。

Answer 2

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

DOM创建输入和IE 7 + 8的onchange事件

2 个答案: