js动态添加表单后，在触发函数中使用document.getElementById获取页面上原有对象的问题

查看:执行效果　请访问网址：http://chinafeihu.gicp.net/
http://chinafeihu.gicp.net/
源代码如下：
------------------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>我有问题，请大家帮助，不胜感激</title>
</head>
<body>
<p>
<pre>
/*
感谢您查看我的问题，相信你我都有收获!
功能与问题描述：
这是一个添加　删除行的操作,大家可以根据实际需要稍作修改就能用在页面上了。
在　用户名　的文本框失去焦点后，触发函数。
页面上已经放置好的元素可以正常的触发函数(前三行)，
但新增加的行，却无法触发函数，该如何修改能够让它正常触发函数，并且在函数中可以使用document.getElementById("xxx")获取页面上的元素.
(说明：如果修改一下方法调用，新增加的行也能够触发函数的，但使用document.getEelementById获取不到页面上的元素,这个问题怎么办？)
*/
</pre>
</p>
<table>
<tr >
<td align="center" >
     <div>
    <span>用户名：<input name="jh" type="text"  size="6" value="" id="qzh00_jh" onBlur="getQzh('qzh00')"/>&nbsp;&nbsp; 身份证：<input name="qzh" type="text"  size="15" value="" id="qzh00"/></span>
    &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
    <span>用户名：<input name="jh" type="text"  size="6" value="" id="qzh01_jh" onBlur="getQzh('qzh01')" />&nbsp;&nbsp; 身份证：<input name="qzh" type="text"  size="15" value=""  id="qzh01" /></span>
    </div>
    <div>
    <span>用户名：<input name="jh" type="text"  size="6" value="" id="qzh1_jh" onBlur="getQzh('qzh1')"/>&nbsp;&nbsp; 身份证：<input name="qzh" type="text"  size="15" value="" id="qzh1"/></span>
    &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
    <span>用户名：<input name="jh" type="text"  size="6" value="" id="qzh2_jh" onBlur="getQzh('qzh2')" />&nbsp;&nbsp; 身份证：<input name="qzh" type="text"  size="15" value=""  id="qzh2" /></span>
    </div>
    <div id="syr_div">
    <span>用户名：<input name="jh" type="text"  size="6" value="" id="qzh3_jh"  onBlur="getQzh('qzh3')" />&nbsp;&nbsp; 身份证：<input name="qzh" type="text"  size="15" value="" id="qzh3"/></span>
    &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
    <span>用户名：<input name="jh" type="text"  size="6" value="" id="qzh4_jh" onBlur="getQzh('qzh4')" />&nbsp;&nbsp; 身份证：<input name="qzh" type="text"  size="15" value=""  id="qzh4"/></span>
</div>
    <div id="czrow" style=" margin-top:10px">
     <input type="button" name="zjyh"  value="增加一行" onClick="addRow();">&nbsp;&nbsp;&nbsp;<input name="scyh" type="button"  value="删除一行" onClick="romoveRow();">
   </div>
    </td>
  </tr>
  </table>
  
  <p>
   源代码请右键查看源文件
  </p></body>
</html>
<SCRIPT language="javascript">
/*
js动态添加表单后，在触发函数中使用document.getElementById获取页面上原有对象的问题
查看:执行效果　请访问网址：http://chinafeihu.gicp.net/
功能与问题描述：
这是一个添加　删除行的操作,大家可以根据实际需要稍作修改就能用在页面上了。
在　用户名　的文本框失去焦点后，触发函数。
页面上的元素可以正常的触发函数，
但新增加的行，却无法触发函数，该如何修改能够让它正常触发函数，并且在函数中可以使用document.getElementById("xxx")获取页面上的元素.
(说明：如果修改一下方法调用，新增加的行也能够触发函数的，但使用document.getEelementById获取不到页面上的元素,这个问题怎么办？)
*/
var id_num1=3;
var id_num2=4;
function addRow()
{
var syr_div = document.getElementById("syr_div");
var czrow_div = document.getElementById("czrow");

var copy_div = syr_div.cloneNode(true);  //拷贝行 id_num1+=2;
id_num2+=2;
var qzh1="qzh" + id_num1;
var qzh2="qzh" + id_num2;//修改第一个span标签中的元素属性
copy_div.firstChild.childNodes.item(1).value="";
copy_div.firstChild.childNodes.item(1).id=id_num1 + "_jh";
//修改第一个span标签中的身份证input框id属性
copy_div.firstChild.lastChild.id=qzh1;
copy_div.firstChild.lastChild.value="";

//修改第一个span标签中的用户名input框onblur属性
copy_div.firstChild.childNodes.item(1).onblur="getQzh('"+ qzh1 +"');";
//修改第二个span标签中的属性
copy_div.childNodes.item(2).childNodes.item(1).value="";
copy_div.childNodes.item(2).childNodes.item(1).id=id_num2 + "_jh";
//修改第二个span标签中的身份证input框id属性
copy_div.childNodes.item(2).lastChild.id=qzh2;
copy_div.childNodes.item(2).lastChild.value="";
//修改第二个span标签中的用户名input框onblur属性
copy_div.childNodes.item(2).childNodes.item(1).onblur="getQzh('"+ qzh2 +"');";

syr_div.parentNode.insertBefore(copy_div,czrow_div); //将拷贝的行添加到 按钮前面}
function romoveRow()
{
var syr_div = document.getElementById("syr_div");
if(syr_div.parentNode.lastChild.previousSibling != syr_div)
{
syr_div.parentNode.removeChild(syr_div.parentNode.lastChild.previousSibling);
}else
{
alert("不能再删除了!");
}
}
function getQzh(fieldId)
{
var jh_input = document.getElementById(fieldId+"_jh");
var yhm=jh_input.value;
//alert(jh_input.value);
alert(jh_input);  //这里验证是否获取到了页面上的元素,输出[object]证明获取到了，输出null是没获取到
alert("哈哈俣！");

}
</SCRIPT>

解决方案 »

  1.   

    看了下，是用的cloneNode克隆的行，没有触发事件是因为你cloneNode并不能克隆元素的事件
      

  2.   

    copy_div.childNodes.item(2).childNodes.item(1).onblur="getQzh('"+ qzh2 +"');"; 
    问题在此...
    onblur是事件,对应设置应该是函数.
    你设置的是字符串..
      

  3.   

    那该怎么样clone事件？？或者用什么办法变通解决一下。
      

  4.   


    设置成copy_div.childNodes.item(2).childNodes.item(1).onblur=function test(){alert("一哈哈");};
    这样设置是可以触发，但再加一句copy_div.childNodes.item(2).childNodes.item(1).onblur=function test(){alert("一哈哈");
    alert(document.getElementById("qzh3_jh"))};//这样获取不到这个input text对象,如何能获取到？
      

  5.   

    改方法.用event.srcElement获取对象是更加好的思路.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>我有问题，请大家帮助，不胜感激</title>
    </head>
    <body>
    <p>
    <pre>
    /*
    感谢您查看我的问题，相信你我都有收获!
    功能与问题描述：
    这是一个添加　删除行的操作,大家可以根据实际需要稍作修改就能用在页面上了。
    在　用户名　的文本框失去焦点后，触发函数。
    页面上已经放置好的元素可以正常的触发函数(前三行)，
    但新增加的行，却无法触发函数，该如何修改能够让它正常触发函数，并且在函数中可以使用document.getElementById("xxx")获取页面上的元素.
    (说明：如果修改一下方法调用，新增加的行也能够触发函数的，但使用document.getEelementById获取不到页面上的元素,这个问题怎么办？)
    */
    </pre>
    </p>
    <table>
    <tr >
    <td align="center" >
         <div>
        <span>用户名：<input name="jh" type="text"  size="6" value="" id="qzh00_jh" onBlur="getQzh('qzh00')"/>&nbsp;&nbsp; 身份证：<input name="qzh" type="text"  size="15" value="" id="qzh00"/></span>
        &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
        <span>用户名：<input name="jh" type="text"  size="6" value="" id="qzh01_jh" onBlur="getQzh('qzh01')" />&nbsp;&nbsp; 身份证：<input name="qzh" type="text"  size="15" value=""  id="qzh01" /></span>
        </div>
        <div>
        <span>用户名：<input name="jh" type="text"  size="6" value="" id="qzh1_jh" onBlur="getQzh('qzh1')"/>&nbsp;&nbsp; 身份证：<input name="qzh" type="text"  size="15" value="" id="qzh1"/></span>
        &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
        <span>用户名：<input name="jh" type="text"  size="6" value="" id="qzh2_jh" onBlur="getQzh('qzh2')" />&nbsp;&nbsp; 身份证：<input name="qzh" type="text"  size="15" value=""  id="qzh2" /></span>
        </div>
        <div id="syr_div">
        <span>用户名：<input name="jh" type="text"  size="6" value="" id="qzh3_jh"  onBlur="getQzh('qzh3')" />&nbsp;&nbsp; 身份证：<input name="qzh" type="text"  size="15" value="" id="qzh3"/></span>
        &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
        <span>用户名：<input name="jh" type="text"  size="6" value="" id="qzh4_jh" onBlur="getQzh('qzh4')" />&nbsp;&nbsp; 身份证：<input name="qzh" type="text"  size="15" value=""  id="qzh4"/></span>
    </div>
        <div id="czrow" style=" margin-top:10px">
         <input type="button" name="zjyh"  value="增加一行" onClick="addRow();">&nbsp;&nbsp;&nbsp;<input name="scyh" type="button"  value="删除一行" onClick="romoveRow();">
       </div>
        </td>
      </tr>
      </table>
      
      <p>
       源代码请右键查看源文件
      </p></body>
    </html>
    <SCRIPT language="javascript">
    /*
    js动态添加表单后，在触发函数中使用document.getElementById获取页面上原有对象的问题
    查看:执行效果　请访问网址：http://chinafeihu.gicp.net/
    功能与问题描述：
    这是一个添加　删除行的操作,大家可以根据实际需要稍作修改就能用在页面上了。
    在　用户名　的文本框失去焦点后，触发函数。
    页面上的元素可以正常的触发函数，
    但新增加的行，却无法触发函数，该如何修改能够让它正常触发函数，并且在函数中可以使用document.getElementById("xxx")获取页面上的元素.
    (说明：如果修改一下方法调用，新增加的行也能够触发函数的，但使用document.getEelementById获取不到页面上的元素,这个问题怎么办？)
    */
    var id_num1=3;
    var id_num2=4;
    function addRow()
    {
    var syr_div = document.getElementById("syr_div");
    var czrow_div = document.getElementById("czrow");

    var copy_div = syr_div.cloneNode(true);  //拷贝行 id_num1+=2;
    id_num2+=2;
    var qzh1="qzh" + id_num1;
    var qzh2="qzh" + id_num2;//修改第一个span标签中的元素属性
    copy_div.firstChild.childNodes.item(1).value="";
    copy_div.firstChild.childNodes.item(1).id=id_num1 + "_jh";
    //修改第一个span标签中的身份证input框id属性
    copy_div.firstChild.lastChild.id=qzh1;
    copy_div.firstChild.lastChild.value="";

    //修改第一个span标签中的用户名input框onblur属性
    copy_div.firstChild.childNodes.item(1).onblur=getQzh;
    //修改第二个span标签中的属性
    copy_div.childNodes.item(2).childNodes.item(1).value="";
    copy_div.childNodes.item(2).childNodes.item(1).id=id_num2 + "_jh";
    //修改第二个span标签中的身份证input框id属性
    copy_div.childNodes.item(2).lastChild.id=qzh2;
    copy_div.childNodes.item(2).lastChild.value="";
    //修改第二个span标签中的用户名input框onblur属性
    copy_div.childNodes.item(2).childNodes.item(1).onblur=getQzh;

    syr_div.parentNode.insertBefore(copy_div,czrow_div); //将拷贝的行添加到 按钮前面}
    function romoveRow()
    {
    var syr_div = document.getElementById("syr_div");
    if(syr_div.parentNode.lastChild.previousSibling != syr_div)
    {
    syr_div.parentNode.removeChild(syr_div.parentNode.lastChild.previousSibling);
    }else
    {
    alert("不能再删除了!");
    }
    }
    function getQzh()
    {
    var jh_input = event.srcElement;
    var yhm=jh_input.value;
    //alert(jh_input.value);
    alert(jh_input);  //这里验证是否获取到了页面上的元素,输出[object]证明获取到了，输出null是没获取到
    alert("哈哈俣！");

    }
    </SCRIPT>
      

  6.   

    修正一下：
    设置成copy_div.childNodes.item(2).childNodes.item(1).onblur=function test(){alert("一哈哈");}; 
    这样设置是可以触发，但再加一句 copy_div.childNodes.item(2).childNodes.item(1).onblur=function test(){alert("一哈哈"); 
    alert(document.getElementById("qzh5_jh"))};
    //alert(document.getElementById("qzh3_jh"))//这样对象　是页面上已存在的，可以获取到,但点击　增加一行 操作后，
    页面上应该是增加了　id="qzh5_jh"　的一个元素，使用alert(document.getElementById("qzh5_jh")) 输出结果为null,请问
    如何能获取到新增加的这一行的元素？ 
      

  7.   

    qzh5_jh是取不到.因为你前面设错了.
    copy_div.firstChild.childNodes.item(1).id=id_num1 + "_jh"; 
      

  8.   


    啊，确实，错了。。唉，让我怀疑了好半天啊，天那！感谢！！copy_div.firstChild.childNodes.item(1).id=qzh1 + "_jh";