为什么关闭第一个DIV同时加载第二个DIV的内容，然后关闭第二DIV不成功。

fl · 发表于 2011-9-7 10:22

现在写个简单的javascript 遇到一个问题。
为什么关闭第一个DIV同时加载第二个DIV的内容，然后关闭第二DIV却不成功。
各位帮解一下。
代码如下：

Java代码
<!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=utf-8" />
<title>Untitled Document</title>
<script src="http://dreamweaverspot.com/jquery/scripts/jquery.js" type="text/javascript"></script>

<script type="text/javascript">
   $(document).ready(function(){


         //打开第一个DIV
         $('#click1').click(function(){
            $('#content1').show('slow');
         });
         //关闭第一个DIV
         $('#content1 a#close').click(function(){
            // 加载第二DIV内容
            setContents();
            $('#content1').hide('slow');
         })
         //打开第二个DIV
         $('#click2').click(function(){
            $('#content2').show('slow');
         });
         //关闭第二个DIV（不成功）
         $('#content2 a').click(function(){
               var v = $(this).html();
               $('#content2').hide('slow');
            })

   });

   //加载第二个DIV内容
   function setContents (){
         var content = "Second DIV";
         content +="<p><a href='#' id='close2'>Close</a></p>";
         $("#content2").html(content);
   }
</script>

<style>

#content1{
   display: none;
}
#content2{
   display: none;
}
</style>

</head>

<body>

<a href="#" id="click1">Open First DIV</a>

<a href="#" id="click2">Open Second DIV</a>

<div class="box">
<div id="content1">
First DIV
<p><a href='#' id='close'>Close</a></p>

</div>

<div id="content2">

</div>

</div>

</body>
</html>

<!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=utf-8" />
<title>Untitled Document</title>
<script src="http://dreamweaverspot.com/jquery/scripts/jquery.js" type="text/javascript"></script>

<script type="text/javascript">
   $(document).ready(function(){


         //打开第一个DIV
   $('#click1').click(function(){
   $('#content1').show('slow');
});
//关闭第一个DIV
   $('#content1 a#close').click(function(){
   // 加载第二DIV内容
   setContents();
   $('#content1').hide('slow');
   })
//打开第二个DIV
$('#click2').click(function(){
     $('#content2').show('slow');
         });
//关闭第二个DIV（不成功）
         $('#content2 a').click(function(){
      var v = $(this).html();
   $('#content2').hide('slow');
   })

   });

   //加载第二个DIV内容
   function setContents (){
         var content = "Second DIV";
   content +="<p><a href='#' id='close2'>Close</a></p>";
         $("#content2").html(content);
   }
</script>

<style>

#content1{
   display: none;
}
#content2{
   display: none;
}
</style>

</head>

<body>

<a href="#" id="click1">Open First DIV</a>

<a href="#" id="click2">Open Second DIV</a>

<div class="box">
<div id="content1">
First DIV
<p><a href='#' id='close'>Close</a></p>

</div>

<div id="content2">

</div>

</div>

</body>
</html>

走就走吧 · 发表于 2011-9-7 10:22

你给#content2的<a>绑定click的时候，#content2的<a>还在娘胎里没出来呢，当然不会给你做事。。
Js代码
//关闭第二个DIV（不成功）
         $('#content2 a').click(function(){
               var v = $(this).html();
               $('#content2').hide('slow');
            })

//关闭第二个DIV（不成功）
         $('#content2 a').click(function(){
               var v = $(this).html();
               $('#content2').hide('slow');
            })
改成 Js代码
$('#content2').delegate('a', 'click', function(){
var v = $(this).html();
$('#content2').hide('slow');
});

         $('#content2').delegate('a', 'click', function(){
               var v = $(this).html();
               $('#content2').hide('slow');
            });

已经来了吗 · 发表于 2011-9-7 10:23

axiheyhey 写道
你给#content2的<a>绑定click的时候，#content2的<a>还在娘胎里没出来呢，当然不会给你做事。。
Js代码
//关闭第二个DIV（不成功）
         $('#content2 a').click(function(){
               var v = $(this).html();
               $('#content2').hide('slow');
            })

//关闭第二个DIV（不成功）
         $('#content2 a').click(function(){
               var v = $(this).html();
               $('#content2').hide('slow');
            })
改成 Js代码
$('#content2').delegate('a', 'click', function(){
var v = $(this).html();
$('#content2').hide('slow');
});

         $('#content2').delegate('a', 'click', function(){
               var v = $(this).html();
               $('#content2').hide('slow');
            });

兄弟，当我关闭第一个content1 时候，在去打开第二个content2, content2里面的内容已经显示出来，不会是#content2的<a>还没有出来的。只是在我关闭content2的时候，content2没有办法hide 起来。
其二，按你的修改也是不行。

楠楠 · 发表于 2011-9-7 10:23

axiheyhey 写道
你给#content2的<a>绑定click的时候，#content2的<a>还在娘胎里没出来呢，当然不会给你做事。。
Js代码
//关闭第二个DIV（不成功）
         $('#content2 a').click(function(){
               var v = $(this).html();
               $('#content2').hide('slow');
            })

//关闭第二个DIV（不成功）
         $('#content2 a').click(function(){
               var v = $(this).html();
               $('#content2').hide('slow');
            })
改成 Js代码
$('#content2').delegate('a', 'click', function(){
var v = $(this).html();
$('#content2').hide('slow');
});

         $('#content2').delegate('a', 'click', function(){
               var v = $(this).html();
               $('#content2').hide('slow');
            });

兄弟你是行的，我这个Jquery http://dreamweaverspot.com/jquery/scripts/jquery.js 版本太低的，换个高版本就OK了。谢谢。

gz-vps · 发表于 2011-9-7 10:23

pearson 写道
兄弟，当我关闭第一个content1 时候，在去打开第二个content2, content2里面的内容已经显示出来，不会是#content2的<a>还没有出来的。只是在我关闭content2的时候，content2没有办法hide 起来。
其二，按你的修改也是不行。

引用
兄弟你是行的，我这个Jquery http://dreamweaverspot.com/jquery/scripts/jquery.js 版本太低的，换个高版本就OK了。谢谢。

因为你的$('#content2')的事件是在DOM加载完毕时就已经绑定的，不是在你关闭了content1的时候，而此时的#content2的<a>还不存在，同学。。jq1.4.2就开始支持delegate了，还在用1.4-的少年伤不起。。

秋秋 · 发表于 2011-9-7 10:23

axiheyhey 写道
pearson 写道
兄弟，当我关闭第一个content1 时候，在去打开第二个content2, content2里面的内容已经显示出来，不会是#content2的<a>还没有出来的。只是在我关闭content2的时候，content2没有办法hide 起来。
其二，按你的修改也是不行。

引用
兄弟你是行的，我这个Jquery http://dreamweaverspot.com/jquery/scripts/jquery.js 版本太低的，换个高版本就OK了。谢谢。

因为你的$('#content2')的事件是在DOM加载完毕时就已经绑定的，不是在你关闭了content1的时候，而此时的#content2的<a>还不存在，同学。。jq1.4.2就开始支持delegate了，还在用1.4-的少年伤不起。。

JavaScript 我是刚开始，算是菜鸟中的极品。做Web 应用不会JavaScript,CSS 简直就是个瘸子呀。

无处不在 · 发表于 2011-9-7 10:23

二点原因：
一个没有做绑定事件；
二是你的jquery版本太老，请换最新的。
jquery.1.2.6这版本，还不够完善，还没有给框架加上事件代理函数，live或delegate.

<!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=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>

<script type="text/javascript">
   $(document).ready(function(){


         //打开第一个DIV
         $('#click1').click(function(){
            $('#content1').show('slow');
         });
         //关闭第一个DIV
         $('#content1 a#close').click(function(){
            // 加载第二DIV内容
            setContents();
            $('#content1').hide('slow');
         })
         //打开第二个DIV
         $('#click2').bind('click', function(){
            $('#content2').show('slow');
         });
         //关闭第二个DIV（不成功）
         $('#content2 a').live('click', function(){
               var v = $(this).html();
               $('#content2').hide('slow');
            })

   });

   //加载第二个DIV内容
   function setContents (){
         var content = "Second DIV";
         content +="<p><a href='#' id='close2'>Close</a></p>";
         $("#content2").html(content);
   }
</script>

<style>

#content1{
   display: none;
}
#content2{
   display: none;
}
</style>

</head>

<body>

<a href="#" id="click1">Open First DIV</a>

<a href="#" id="click2">Open Second DIV</a>

<div class="box">
<div id="content1">
First DIV
<p><a href='#' id='close'>Close</a></p>

</div>

<div id="content2">

</div>

</div>

</body>
</html>

走失的猫咪 · 发表于 2011-9-7 10:23

不建议用live来委派，不支持通过DOM遍历的方法找到的元素，而且效率低，还不能阻止冒泡。。

话说我当年 · 发表于 2011-9-7 10:24

建议楼主研究一下闭包，问题就能解决。

叫我小乖 · 发表于 2011-9-7 10:24

bind and live

帐号		自动登录	找回密码
密码			成为会员