jquery问题

sasgsc 2010-07-16 06:35:29
过程:初始的SPAN点击后移动到中间,然后生成另外五个SPAN.然后点击生成的SPAN,这个被点击的SPAN又会移动到中间,并再次生成5个SPAN.

代码如下:
var arra=new Array('a','b','c','d');

$(document).ready(function() {
$('span').click(function() {
$.each($('span'), function(i, n){ alert($(this).attr("id"));});

$('span').not($(this)).remove();
$.each( arra, function(i, n){ $('#mainDiv').append("<span id="+i+">"+n+"</span><br>");});
//alert($(this).attr("id"));

$(this).animate( { width:"200px",height:"200px","left":($(document).width()/2-200)+"px","top":($(document).height()/2-200)+"px" }, { queue:false, duration:3000 } );

})
});


HTML:
<div id="mainDiv">
<span id="5">aaa</span><br/><span id="rela">bbb</span><span id="6">aaa</span><br/><span id="rela7">bbb</span>
</div>


问题:新生成的SPAN不能点击.无法触发事件.但是SPAN列表里确实有形成的SPAN.求解.谢谢.
...全文
61 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
kyzy_yy_pm 2010-07-16
  • 打赏
  • 举报
回复
循环出四个才对
kyzy_yy_pm 2010-07-16
  • 打赏
  • 举报
回复
[Quote=引用 3 楼 ibm_hoojo 的回复:]
HTML code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>moveSpan.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keywo……
[/Quote]+
sasgsc 2010-07-16
  • 打赏
  • 举报
回复
马上结贴,忘记可以写成一个类了,谢谢谢谢~~~~~

不过顺便问下,什么叫 return false;//阻止事件冒泡 什么是事件冒泡........
hoojo 2010-07-16
  • 打赏
  • 举报
回复

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>moveSpan.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
span {
border: 1px solid red;
}
</style>
<script type="text/javascript">
var arra=new Array('a','b','c','d');

$(document).ready(function() {
$('span').click(addSpan);
});

function addSpan() {
//$.each($('span'), function(i, n){ alert($(this).attr("id"));});
var temp = $(this);
alert(temp.text());
temp.parent().find("span").not(temp).remove().end().end().find("br:gt(0)").remove();
$.each(arra, function(i, n){
var spanNode = $("<br/><span>"+n+"</span>");
spanNode.click(addSpan);
temp.append(spanNode);
});
return false;//阻止事件冒泡
//$(this).animate({ width:"200px",height:"200px","left":($(document).width()/2-200)+"px","top":($(document).height()/2-200)+"px" }, { queue:false, duration:3000 } );
}
</script>

</head>

<body>
<div id="mainDiv">
<br/><span id="5">aaa</span>
<br/><span id="rela">bbb</span>
<br/><span id="6">aaa</span>
<br/><span id="rela7">bbb</span>
</div>
</body>
</html>
注意如果要添加id,那么你的id就不要重复。重复的id可能造成js冲突而失效
sasgsc 2010-07-16
  • 打赏
  • 举报
回复
[Quote=引用 1 楼 mrshelly 的回复:]

append 新增的 DOM 元素 需要重新绑定事件...
你的需求我建议你不要新增DOM元素.. 而是使用 绝对定位. 调一下位置而已...
[/Quote]
什么意思啊? 我的意思是,页面不会转换,但是会用异步读取资料,并生成新的块. 其实重要的不是位置,而是需要把新的内容给显示出来.

怎么能动态的重新绑定啊? 要不是每个SPAN后面加个onclick可不可以?
mrshelly 2010-07-16
  • 打赏
  • 举报
回复
append 新增的 DOM 元素 需要重新绑定事件...
你的需求我建议你不要新增DOM元素.. 而是使用 绝对定位. 调一下位置而已...

52,797

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 Ajax
社区管理员
  • Ajax
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧