首页 新闻 搜索 专区 学院

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

0
悬赏园豆: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>

js
szchenrong的主页 szchenrong | 初学一级 | 园豆:175
提问于:2013-12-17 23:05
< >
分享
最佳答案
1
<!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)
0

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

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

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

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

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

$(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>');

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

空明流光 | 园豆:69 (初学一级) | 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
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册