1jQuery实现同一对象增删
<select id="opt">
<option>北京</option>
<option>深圳</option>
<option>上海</option>
<option>广州</option>
</select>
<script type="text/javascript">
let node = $("#opt");// 这是全局select对象
let nodeParent = node.parent();
function show(){
console.log(node.val());
// 删除node对象(select框)，在把node对象添加进去
nodeParent.empty();
nodeParent.append(node);
}
node.blur(show);//绑定事件
// ("blur",show); //一样无效
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
2.原因是jQuery对象在插入到dom中时，事件会丢失
2.1 初始时在控制台中看到node存在事件
2.2 执行一次后，node对象变成undefined
简单来说就是，如果有一个jQuery对象中绑定了事件，这个对象在添加到dom中时，事件会丢失。
3.但如果是JS实现的话，是没有问题的
<body>
<select id="opt">
<option>北京</option>
<option>深圳</option>
<option>上海</option>
<option>广州</option>
</select>
<script type="text/javascript">
let node = document.getElementById("opt");
function show(){
console.log(node.value);
document.body.removeChild(node);
document.body.appendChild(node);
}
node.addEventListener("blur",show); //事件持续有用
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
事件一直存在，chrome上可以看到
但firfox的控制台中找不到有关的事件信息