动态追加循环的span,怎样设置点击事件,每个id不能一样。

动态追加循环的span,怎样设置点击事件,每个id不能一样。,第1张

直接在span中添加onclick事件

类似于

<span onclick='spanclick(this)'></span>

在页面本身或者引用的js文件中添加js方法

function spanclick(obj){

//方法体

}

你这样是无法触发click事件的,原因是span是内联元素,自身大小根据内容而变化,没内容就没大小,更不可能被click;

解决方法很简单:

1、span中添加内容,例如<span class="1">内容</span>

2、定义span的display属性为block或inline-block,并定义大小例如:<style>标签中加入 .1{display:blockwidth:50pxheight:50px}

首先你查看一下js错误,movediv()未定义,然后查看一下源文件就明白是怎么回事了,document.write将重新生成HTML源码,以前的代码已经丢失,所以我给你改写了一下;

还有"this.movediv()"的"this"是错误的,去掉;

修改后的代码如下,希望对你有用:

<html>

<head>

<script>

function display()

{

var ss="<table name='tabframe'align='center' style='text-align:centerbackground-color:green'>"

ss+="<tr><td><input type=button style='color:redwidth:200height:100border:1px solid #111111' value='div留言' onclick=document.getElementById('divframe').style.display='block'></td></tr></table>"

ss+="<div id='divframe' style='width:500pxheight:100pxdisplay:noneposition:absolutebackground-color:#ddddddtop:200left:200'>"

ss+="<table align='center' border=1 style='text-align:centerborder:1px solid #aaaaaa '>"

ss+="<tr><td style='text-align:center'><span onclick=movediv()>我的显示信息</span></td></tr>"

ss+="<tr><td>文字</td></tr>"

ss+="<tr><td><span style='cursor:hand' onclick=document.getElementById('divframe').style.display='none'>[关闭]</td></tr>"

ss+="</table>"

ss+="</div>"

window.document.body.innerHTML+=ss

/*

document.write("<table name='tabframe'align='center' style='text-align:centerbackground-color:green'>")

document.write("<tr><td><input type=button style='color:redwidth:200height:100border:1px solid #111111' value='div留言' onclick=document.getElementById('divframe').style.display='block'></td></tr></table>")

document.write("<div id='divframe' style='width:500pxheight:100pxdisplay:noneposition:absolutebackground-color:#ddddddtop:200left:200'>")

document.write("<table align='center' border=1 style='text-align:centerborder:1px solid #aaaaaa '>")

document.write("<tr><td style='text-align:center'><span onclick=this.movediv()>我的显示信息</span></td></tr>")

document.write("<tr><td>文字</td></tr>")

document.write("<tr><td><span style='cursor:hand' onclick=document.getElementById('divframe').style.display='none'>[关闭]</td></tr>")

document.write("</table>")

document.write("</div>")

*/

}

function movediv()

{

alert('aa')

}

</script>

</head>

<body onload="display()">

</body>

</html>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11292325.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-15
下一篇 2023-05-15

发表评论

登录后才能评论

评论列表(0条)

保存