这是我在学习锋利的 jquery 书中 5.1.4 的代码时遇到的一个小问题，源代码如下：
<head>
<style type="text/css">
* { margin:0; padding:0; }
div.centent {
float:left;
text-align: center;
margin: 10px;
}
span {
display:block;
margin:2px 2px;
padding:4px 10px;
background:#898989;
cursor:pointer;
font-size:12px;
color:white;
}
</style>
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
//移到右边
$(‘#add‘).click(function() {
//获取选中的选项，删除并追加给对方
$(‘#select1 option:selected‘).appendTo(‘#select2‘);
});
//移到左边
$(‘#remove‘).click(function() {
$(‘#select2 option:selected‘).appendTo(‘#select1‘);
});
//全部移到右边
$(‘#add_all‘).click(function() {
//获取全部的选项,删除并追加给对方
$(‘#select1 option‘).appendTo(‘#select2‘);
});
//全部移到左边
$(‘#remove_all‘).click(function() {
$(‘#select2 option‘).appendTo(‘#select1‘);
});
//双击选项
$(‘#select1‘).dblclick(function(){ //绑定双击事件
//获取全部的选项,删除并追加给对方
$("option:selected",this).appendTo(‘#select2‘); //追加给对方
});
//双击选项
$(‘#select2‘).dblclick(function(){
$("option:selected",this).appendTo(‘#select1‘);
});
});
</script>
</head>
<body>
<!--左边-->
<div class="centent">
<select multiple="multiple" id="select1" style="width:100px;height:160px;"> <!--multiple 可以选择多个选项-->
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
<option value="5">选项5</option>
<option value="6">选项6</option>
<option value="7">选项7</option>
</select>
大专栏 jQ给下拉框绑定事件，为什么要绑定在框(select标签)上，而不是绑定在选项(option标签)上 <div>
<span id="add" >选中添加到右边>></span>
<span id="add_all" >全部添加到右边>></span>
</div>
</div>
<!--右边-->
<div class="centent">
<select multiple="multiple" id="select2" style="width: 100px;height:160px;">
<option value="8">选项8</option>
</select>
<div>
<span id="remove"><<选中删除到左边</span>
<span id="remove_all"><<全部删除到左边</span>
</div>
</div>
</body>
</html>
这是锋利的 jquery 书中 5.1.4 的代码。显示的效果是这样的：
在双击的绑定上，示例代码绑定在了框上（select 元素上），我自己练习的时候想当然的就绑定在了 select 里面的 option 上，代码如下
$("#select1 option").dblclick(function () {
$(this).appendTo("#select2")
});
$("#select2 option").dblclick(function () {
$(this).appendTo("#select1")
});
然后就出问题了，左边的选项移动到右面去之后，再双击无法移动回左边。
后来想明白了，我用了$(function(){})这个入口函数，在页面刚加载完成的时候，按照我的写法，把双击事件绑定到了现有的所有 option 上；
对于左边的 option，在页面加载完后被绑定了双击事件，双击可以移动到对面去；但是移动过去之后，这个 option 就失去了双击事件了，右边的 select 原有的元素已经在页面加载的时候被绑定了双击事件了，新移动过去的 option 也不会被再绑定一次双击事件，所以双击该元素没有反应，也不会报错。
但如果绑定在 select 上，不管这个 option 是原住民还是新移民，只要符合选择器里的条件，都可以执行对应的 function 里的语句。
原文地址：https://www.cnblogs.com/lijianming180/p/12014168.html
时间： 2024-11-06 21:28:19