一、事件绑定多次
</pre><pre name="code" class="javascript">$("#btn").click(function(){
$("p").slideToggle();
})
今天在工作过程中，突然碰到给一个元素的click事件绑定n（n>1）次同一个函数，我原以为只会执行一次，后来才发现，当点击一次元素以后，就会执行n次事件函数
如：
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle();
});
$("button").click(function(){
$("p").slideToggle();
});
$("button").click(function(){
$("p").slideToggle();
});
$("button").click(function(){
$("p").slideToggle();
});
$("button").click(function(){
$("p").slideToggle();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>切换</button>
</body>
</html>
上面这段代码，当我点击一次button以后，会执行5次
$("p").slideToggle();
二、jquery on函数
使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。
<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
// $("p").on("click",function(){
// alert("you click a paragraph");
// })
$(document).on("click","p",function(){
alert("you click a paragraph");
});
$("#btn").on("click",function(){
var node=document.createElement("p");
var textnode=document.createTextNode("Water");
node.appendChild(textnode);
$("body").append(node);
});
});
</script>
</head>
<body>
<button id="btn">add a paragraph</button>
<p>first</p>
</body>
</html> 注意：如果写成
$("p").on("click",function(){
alert("you click a paragraph");
})这样是无法适用于未来元素的
7746
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
