创建input对象时遇到的问题,各位大神帮帮忙解答

丨黑暗星云丨 实习  2016-02-26 04:29:33
写一个动态生成复选框的函数,窗口加载完触发生成第一个复选框,勾选之会调用某个函数,但是创建完以后勾选之毫无动静,函数并没有被调用,onclick并没有加到dom里去,试着改成button也没有反应,这是什么原因呢,希望能有大神解惑。
var e=document.createElement("input");
e.type="checkbox";
e.id="jump"+num;
e.onclick=function(){boxcheck(this.id)};
document.getElementById("two_block"+num).appendChild(e);

...全文
122 点赞 收藏 10
写回复
10 条回复
丨黑暗星云丨 2016年02月29日
引用 9 楼 functionsub 的回复:
上面最后一行appendChild前面少一个.
说的很清楚,十分感谢 还有就是1L发的那个,那是中间还有个复选框,但其实性质是一样的,后面也使用了innerHTML 不管怎么样,还是感谢
回复 点赞
functionsub 2016年02月29日
上面最后一行appendChild前面少一个.
回复 点赞
functionsub 2016年02月29日
document.getElementById("three_block"+num).innerHTML+=mm; 这个地方有问题 这样会把前面加进去的带有click事件的input给转成html,再进行字符串拼接。 拼接后的input已经不是原来那个带有click事件的元素了 你在1L给出的代码不是这样的。。问题就出在appendChild后又innerHTML了。 如果你要在input后面增加字符串,要么createElement一个span,调用span的innerHTML来加字符,要么就直接createTextNode('其他') 像下面这样:
        var m=document.createElement("input");
        m.type="checkbox";
        m.id="prompt"+num;
        m.style.display="inline-block";
        m.onclick=function(){boxcheck(this.id)};
        document.getElementById("three_block"+num).appendChild(m);
        var mm=document.createTextNode("其他  ");
        document.getElementById("three_block"+num).appendChild(mm);
或者
        var m=document.createElement("input");
        m.type="checkbox";
        m.id="prompt"+num;
        m.style.display="inline-block";
        m.onclick=function(){boxcheck(this.id)};
        document.getElementById("three_block"+num).appendChild(m);
        var mm=document.createElement('span');
        mm.innerHTML = "其他  ";
        document.getElementById("three_block"+num)appendChild(mm);
回复 点赞
丨黑暗星云丨 2016年02月29日
引用 3 楼 functionsub 的回复:
看看控制台有没有报错吧。 这代码确实没什么问题。 实在不行你把跟这块有关的代码完整的贴出来吧啊。
因为真的很长 <body> <script> var num=1; window.onload=addfirst function boxcheck(id) { var a=document.getElementById(id); if(a.checked==true) { var b=id.replace(/[^0-9]/ig,""); if(id=="jump"+b) {document.getElementById("in_two_block"+b).style.display="inline-block"} else if(id=="prompt"+b) {document.getElementById("three_block"+b).style.display="inline-block"} else return; } else { var b=id.replace(/[^0-9]/ig,""); if(id=="jump"+b) {document.getElementById("in-two_block"+b).style.display="none"} else if(id=="prompt"+b) {document.getElementById("ps"+b).style.display="none"} else return; } } function addfirst() { var first_father=document.createElement("div"); first_father.id="son"+num; first_father.class="son"; document.getElementById("father").appendChild(first_father); var a=document.createElement("div"); a.id="one_block"+num; a.style.display="block"; document.getElementById("son"+num).appendChild(a); var b=document.createElement("input"); b.type="text"; b.id="number"+num; b.style.width="40px"; b.name="number"; b.placeholder="序号"; document.getElementById("one_block"+num).appendChild(b); var c=document.createElement("input"); c.type="text"; c.id="question"+num; c.style.width="240px"; c.name="question"; c.placeholder="问题"; document.getElementById("one_block"+num).appendChild(c); var d=document.createElement("input"); d.type="button"; d.id="+button"+num; d.name="name1"; d.value="+"; document.getElementById("one_block"+num).appendChild(d); var f=document.createElement("div"); f.id="two_block"+num; f.style.display="block"; document.getElementById("son"+num).appendChild(f); var e=document.createElement("input"); e.type="checkbox"; e.id="jump"+num; e.onclick=function(){boxcheck(this.id)}; document.getElementById("two_block"+num).appendChild(e); var ee="隐藏 "; document.getElementById("two_block"+num).innerHTML+=ee; var p=document.createElement("div"); p.id="in_two_block"+num; p.style.display="inline-block"; document.getElementById("two_block"+num).appendChild(p); var g=document.createElement("span"); g.innerHTML="年:"; document.getElementById("in_two_block"+num).appendChild(g); var h=document.createElement("input"); h.type="text"; h.id="chapter"+num; h.style.width="25px"; name="chapter"; document.getElementById("in_two_block"+num).appendChild(h); var i=document.createElement("span"); i.innerHTML="月:"; document.getElementById("in_two_block"+num).appendChild(i); var j=document.createElement("input"); j.type="text"; j.id="scene"+num; j.style.width="25px"; name="scene"; document.getElementById("in_two_block"+num).appendChild(j); var k=document.createElement("span"); k.innerHTML="日:"; document.getElementById("in_two_block"+num).appendChild(k); var l=document.createElement("input"); l.type="text"; l.id="event"+num; l.style.width="25px"; name="event"; document.getElementById("in_two_block"+num).appendChild(l); var n=document.createElement("div"); n.id="three_block"+num; n.style.display="block"; document.getElementById("son"+num).appendChild(n); var m=document.createElement("input"); m.type="checkbox"; m.id="prompt"+num; m.style.display="inline-block"; m.onclick=function(){boxcheck(this.id)}; document.getElementById("three_block"+num).appendChild(m); var mm="其他  "; document.getElementById("three_block"+num).innerHTML+=mm; var o=document.createElement("input"); o.type="text"; o.id="ps"+num; o.name="ps"; document.getElementById("three_block"+num).appendChild(o); } </script> <div id="father"> </div> </body>
回复 点赞
functionsub 2016年02月29日
引用 5 楼 baidu_33978942 的回复:
[quote=引用 3 楼 functionsub 的回复:] 看看控制台有没有报错吧。 这代码确实没什么问题。 实在不行你把跟这块有关的代码完整的贴出来吧啊。
我在一开始是利用window.onload创建一个子元素在id为"father"的div里,然后再继续添加文本框和复选框等等,然后又把其中某几个再装进div里,然后又发现这里面还要再分,这样就成了一层套一层……下图 然后就出现了刚才的问题,onclick无法添加到dom里,然后我就试着将id为jump1的input放到father里(就是第一层的div) 我接着又试着干脆不创这么多div,直接全写进son1里,结果放在一块始终不行…… 希望能告知我这种情况的原因[/quote] 贴代码吧。。
回复 点赞
丨黑暗星云丨 2016年02月26日
引用 3 楼 functionsub 的回复:
看看控制台有没有报错吧。

这代码确实没什么问题。

实在不行你把跟这块有关的代码完整的贴出来吧啊。

我在一开始是利用window.onload创建一个子元素在id为"father"的div里,然后再继续添加文本框和复选框等等,然后又把其中某几个再装进div里,然后又发现这里面还要再分,这样就成了一层套一层……下图

然后就出现了刚才的问题,onclick无法添加到dom里,然后我就试着将id为jump1的input放到father里(就是第一层的div)

我接着又试着干脆不创这么多div,直接全写进son1里,结果放在一块始终不行……

希望能告知我这种情况的原因
回复 点赞
丨黑暗星云丨 2016年02月26日
引用 3 楼 functionsub 的回复:
看看控制台有没有报错吧。 这代码确实没什么问题。 实在不行你把跟这块有关的代码完整的贴出来吧啊。
控制台是一直完全不反应的,所以我才很蛋疼啊,不贴出全部代码是因为是一直重复创建对象再添加,创建了很多但是并没有做其他的,请你等一等我做个说明出来,免得你直接看代码会很繁的。
回复 点赞
functionsub 2016年02月26日
看看控制台有没有报错吧。 这代码确实没什么问题。 实在不行你把跟这块有关的代码完整的贴出来吧啊。
回复 点赞
丨黑暗星云丨 2016年02月26日
引用 1 楼 functionsub 的回复:
这几行代码没问题。

检查下 boxCheck 这个函数是否跟这几行代码在同一作用域或全局作用域里。

boxcheck()是在全局作用域里的,按理说应该能调用
我修改了一下,把创建的对象添加到了第一个div里,就是这里

本来是创建在这个div的子元素的子元素里

结果就能调用了,请问这是什么原理呢
回复 点赞
functionsub 2016年02月26日
这几行代码没问题。 检查下 boxCheck 这个函数是否跟这几行代码在同一作用域或全局作用域里。
回复 点赞
发动态
发帖子
JavaScript
创建于2007-09-28

5.1w+

社区成员

22.3w+

社区内容

Web 开发 JavaScript
社区公告
暂无公告