js给还没有动态加载的dom绑定事件

悬赏园豆：15 [已解决问题] 解决于 2013-12-19 21:47

我想做出的效果，是这个页面的功能 http://www.17u.cn/flight/flight-book1.aspx?para=0*PEK*CKG*2013-12-24*00%3a00*23%3a59**all*all&key=A4D410CBF0B1A03DC546074744F49AD1&TCAlianceCode=&cztype=

放在"退改签"3个字上，会出现提示框功能，进入到框内，框也正常显示，直到移走，框隐藏

代码如下:

<!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>
<style>
#lookinfo{ width:500px; border:5px solid #DDD; position:relative; left:100px; top:-15px; display:none;}
#info{ border:1px solid #999; }
#tip{ background:url(http://img1.40017.cn/cn/new_ui/airplane/book/book1_k.0.1.0.png) no-repeat -132px -195px; width:17px; height:8px;
position:absolute; top:-7px; left:10px;}
</style>

<script type="text/javascript">

function DisplayInfo()
{
var obj=document.getElementById("lookinfo");
if(obj==null)
{
//创建
var div=document.createElement("div");
div.id="lookinfo";
div.innerHTML="<div id='tip'></div>"+
"<div id='info'>"+
"<p>11111111111111111111111</p><p>11111111111111111111111</p><p>11111111111111111111111</p><p>11111111111111111111111</p></div>";
document.body.appendChild(div);
div.style.display="block";
div.onmouseover=function(){
div.style.dispaly="block";
};
div.onmouseout=function(){
div.style.dispaly="none";
};

}
else
{
obj=document.getElementById("lookinfo");
obj.onmouseover=function(){
obj.style.dispaly="block";
alert('over');
};
obj.onmouseout=function(){

obj.style.dispaly="none";
alert('out');
};
}

}

function CloseInfo()
{
var obj=document.getElementById("lookinfo");
obj.style.display="none";

}

</script>
</head>

<body>

<p >欢迎大家!<a href="###" onmouseover="DisplayInfo();" onmouseout="CloseInfo();">查看这里的信息</a></p>

</body>
</html>

szchenrong | 初学一级 | 园豆：175
提问于：2013-12-17 23:05

< >

最佳答案

<!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>
<style>
#lookinfo{ width:500px; border:5px solid #DDD; position:relative; left:100px; top:-15px; display:none;}
#info{ border:1px solid #999; }
#tip{ background:url(http://img1.40017.cn/cn/new_ui/airplane/book/book1_k.0.1.0.png) no-repeat -132px -195px; width:17px; height:8px;
position:absolute; top:-7px; left:10px;}
</style>

<script type="text/javascript">

function createInfo() {
    var div=document.createElement("div");
    div.id="lookinfo";
    div.innerHTML="<div id='tip'></div>"
                 +"<div id='info'>"
                 +"<p>11111111111111111111111</p><p>11111111111111111111111</p><p>11111111111111111111111</p><p>11111111111111111111111</p></div>";
    document.body.appendChild(div);
    div.onmouseover = displayInfo;
    div.onmouseout= closeInfo;
}

function displayInfo() {
    document.getElementById("lookinfo").style.display="block";
}

function closeInfo() {
    document.getElementById("lookinfo").style.display="none";
}
</script>
</head>
<body>

<p >欢迎大家!<a href="###" onmouseover="displayInfo();" onmouseout="closeInfo();">查看这里的信息</a></p>

<script type="text/javascript">
    createInfo();
</script>
</body>
</html>

View Code

还是有缺陷，没有那个网站的效果好，只能从那个三角形的地方进入提示区，提示区不会消失，从其他地方进入提示区，提示区很容易消失，有待改进。

收获园豆：15

ThreeTree | 小虾三级 |园豆：1490 | 2013-12-18 00:19

是的，效果你做出来了，对的，可是好像我的那个链接地址上是可以从别的地方，不是三角的地方也能进入

szchenrong | 园豆：175 (初学一级) | 2013-12-18 21:40

还有为什么要把显示，隐藏的方法单独拿出来就可以，而像我上面写的代码反而不行呢？

szchenrong | 园豆：175 (初学一级) | 2013-12-18 21:46

@szchenrong:

<!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>
<style>
#lookinfo{ width:500px; border:5px solid #DDD; position:relative; left:100px; top:-15px; display:none;}
#info{ border:1px solid #999; }
#tip{ background:url(http://img1.40017.cn/cn/new_ui/airplane/book/book1_k.0.1.0.png) no-repeat -132px -195px; width:17px; height:8px;
position:absolute; top:-7px; left:10px;}
</style>

<script type="text/javascript">
var flag = 0;

function createInfo() {
    var div=document.createElement("div");
    div.id="lookinfo";
    div.innerHTML="<div id='tip'></div>"
                 +"<div id='info'>"
                 +"<p>11111111111111111111111</p><p>11111111111111111111111</p><p>11111111111111111111111</p><p>11111111111111111111111</p></div>";
    document.body.appendChild(div);
    div.onmouseover = displayInfo1;
    div.onmouseout= closeInfo1;
}

function displayInfo1() {
    flag = 1;
    directDisplayInfo();
}

function closeInfo1() {
    flag = 0;
    directCloseInfo();
}

function closeInfo2() {
   setTimeout("if(flag==0) directCloseInfo();", "200");
}

function directDisplayInfo() {
    document.getElementById("lookinfo").style.display="block";
}

function directCloseInfo() {
    document.getElementById("lookinfo").style.display="none";
}
</script>
</head>
<body>

<p >欢迎大家!<a href="###" onmouseover="directDisplayInfo();" onmouseout="closeInfo2();">查看这里的信息</a></p>

<script type="text/javascript">
    createInfo();
</script>
</body>
</html>

View Code

这下OK了，不过这代码挺蛋疼的。

ThreeTree | 园豆：1490 (小虾三级) | 2013-12-19 17:44

@szchenrong:

<!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>
<style>
#lookinfo{ width:500px; border:5px solid #DDD; position:relative; left:100px; top:-15px; display:none;}
#info{ border:1px solid #999; }
#tip{ background:url(http://img1.40017.cn/cn/new_ui/airplane/book/book1_k.0.1.0.png) no-repeat -132px -195px; width:17px; height:8px;
position:absolute; top:-7px; left:10px;}
</style>

<script type="text/javascript">

function DisplayInfo()
{
var obj=document.getElementById("lookinfo");
if(obj==null)
{
//创建
var div=document.createElement("div");
div.id="lookinfo";
div.innerHTML="<div id='tip'></div>"+
"<div id='info'>"+
"<p>11111111111111111111111</p><p>11111111111111111111111</p><p>11111111111111111111111</p><p>11111111111111111111111</p></div>";
document.body.appendChild(div);
div.style.display="block";
div.onmouseover=function(){
div.style.dispaly="block";
};
div.onmouseout=function(){
div.style.dispaly="none";
};


}
else
{ 
obj=document.getElementById("lookinfo").style.display="block";
}

} 

function CloseInfo()
{
var obj=document.getElementById("lookinfo");
obj.style.display="none";

}


</script>
</head>
<body>

<p >欢迎大家!<a href="###" onmouseover="DisplayInfo();" onmouseout="CloseInfo();">查看这里的信息</a></p>
</body>
</html>

View Code

你的代码写错了，如果已经存在那个DIV了，说明已经创建好了，也就不需要赋值onmouseover和onmouseout事件了，之间让他显示就可以了，你的代码整体逻辑还是没有问题的，不过最好是把方法体写小一点。

ThreeTree | 园豆：1490 (小虾三级) | 2013-12-19 17:51

@ThreeTree: 谢谢，辛苦了！

szchenrong | 园豆：175 (初学一级) | 2013-12-19 21:46

其他回答(2)

给父容器绑定事件，判断target是哪个子元素，做相关操作

传说中jQuery的delegate和on就是这么干的

谦行 | 园豆：473 (菜鸟二级) | 2013-12-18 09:45

jquery我以前弄过，我现在是要原生的js实现，现在公司不给用jquery,所以原生js。。

支持(0) 反对(0) szchenrong | 园豆：175 (初学一级) | 2013-12-18 21:35

$(function(){

　　//写你的代码

});

jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。

这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时，选择器匹配的元素会附加一个事件处理函数，而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。比如说

<body> <div class="clickme">Click here</div> </body>

可以给这个元素绑定一个简单的click事件：

$('.clickme').bind('click', function() { alert("Bound handler called."); });

.live() 就提供了对应这种情况的方法。如果我们是这样绑定click事件的：

$('.clickme').live('click', function() { alert("Live handler called."); });

然后再添加一个新元素：

$('body').append('<div class="clickme">Another target</div>');

然后再点击新增的元素，他依然能够触发事件处理函数。

空明流光 | 园豆：106 (初学一级) | 2013-12-18 11:41

jquery我以前弄过，我现在是要原生的js实现，现在公司不给用jquery,所以原生js。。。

支持(0) 反对(0) szchenrong | 园豆：175 (初学一级) | 2013-12-18 21:34

@szchenrong: 原生的和jquery能有多大区别

var table=document.getElementById('XXX');

table.addEventListener('click',function(e){//浏览器兼容性原生的自己应该可以处理吧

var event=e || windown.event;

var target=event.target || event.srcElement;

if(target.tagName='TD' && target.className.indexOf('youownclass')>-1){//假设你td都添加了某个class，反正得有个标识让人知道这个td是table的子元素

　　//点击td的操作

}

},false);

支持(0) 反对(0) 谦行 | 园豆：473 (菜鸟二级) | 2013-12-19 17:24

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。

js给还没有动态加载的dom绑定事件

欢迎，请先登录或者注册。