您的位置：首页 > Web前端 > JQuery

jquery click事件绑定

2015-11-30 14:24 465 查看

一、事件绑定多次

</pre><pre name="code" class="javascript">$("#btn").click(function(){
$("p").slideToggle();
})

上面这段代码指的是给id为btn的元素绑定click事件，而不是执行click函数。

今天在工作过程中，突然碰到给一个元素的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>...</p>，也没关系，后添加进来的<p>...</p>也被绑定上了click事件

注意：如果写成

$("p").on("click",function(){
alert("you click a paragraph");
})

这样是无法适用于未来元素的

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航