jquery 中appendTo()函数的疑惑?

答案:4 悬赏:70 手机版

解决时间 2021-01-27 08:17

提问者网友：棒棒糖
2021-01-26 19:15

<html>
<head>
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("#ul1 li").css("cursor", "pointer")
.mouseover(function () {
$(this).css("background", "red").siblings().css("background", "white");
})
.click(function () {
$(this ).css("background", "white").appendTo("#ul2");
});
});
</script>
</head>
<body>
<ul id="ul1" style="float:left;width:30%;">
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>dddd</li>
<li>eeee</li>
</ul>
<ul id="ul2" style="float:left;width:30%;">

</ul>

</body>
</html>

右边的ID为ul2的列表,为什么也会触发本属于左边列表的mouseover和click事件.
图片上右边的列表也变红了..难道appendTo()会把事件也加过去??

最佳答案

五星知识达人网友：掌灯师
2021-01-26 20:03

原有元素通过appendTo之后会把文本、属性、事件等都复制过去。
所以要想避免这个问题需要使用.clone(false);

原来的代码修改为$(this ).css("background", "white").clone(false).appendTo("#ul2");
就可以防止这个问题。

我已经测试过没有问题了。采纳吧，顺便多给些分数。

全部回答

1楼网友：怙棘
2021-01-26 22:38

对的，因为你appendTo的是li，所以li所带的事件照样起作用。

2楼网友：梦中风几里
2021-01-26 21:58

可以这样理解只要你是连续的调用方法就会没有先后你先click 在 onmouseover 也一样的个人感觉 jquery 会把你的事件一次性执行而不是分两步走应为如用变量接受那个this 然后比较变量的差别发现是恒等的

3楼网友：轻雾山林
2021-01-26 20:24

appendto会将元素从当前位置移除，移动到指定元素后面去，append则不会。 appendchild是为指定元素添加子元素。

我要举报

如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！

点此我要举报以上问答信息