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

发布于 2024-12-18 13:51:12 字数 3870 浏览 0 评论 0原文

我试图弄清楚为什么我的通过 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 对象,它是只是一个跟踪用户将提供多少输入的对象。

正如您所看到的,两个输入文本框(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 中的第一个函数(因此警报永远不会弹出)。

让我知道大家的想法...

I am trying to figure out why my javascript that creates input elements on the fly via DOM is referencable in Firefox but not in IE 7 nor 8.

I have the following function triggered when a user clicks a button

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);

Please ignore the pageCounter object, it is simply an object that keeps track of how many inputs the user will be supplying.

As you can see there is a onChange event attribute added to each of the 2 input text boxes (InputIPBox and host_inputbox) They are practically identical so I will supply one of the functions

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);
}

The ajax.psp page works perfectly and this function works when called for different parts of my site, So i know it is receiving the desired resolution values.

So I am quite stumped, because it works perfectly in Firefox, but not in IE..Also further debuggin I see that the onchange event never goes to the first function in IE(hence the alert never gets popped).

Let me know what you all think...

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

青萝楚歌 2024-12-25 13:51:12

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

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

也适用于 Firefox 和 Chrome 等。

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

再次编辑 - 是的,应该没问题。当您的函数被调用时,this 将是更改后的 节点。

Don't use "setAttribute()" to set things that should be properties on the DOM node. Thus, set the "onchange" handler with

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

That will work with Firefox and Chrome etc. too.

edit — hold on - we're going to have to make sure this is properly bound in the function. I'm not sure it'll be bound automatically in older IE, so I'll check.

edit again — yup it should be fine. When your function is called, this will be the changed <input> node.

飘然心甜 2024-12-25 13:51:12
endpoint_IP_InputElement.onchange = function(){
    resolveMe(this.value,"endpoint_'+count+'_name", "ip");
};
endpoint_IP_InputElement.onchange = function(){
    resolveMe(this.value,"endpoint_'+count+'_name", "ip");
};
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文